@use "defaults";

@media screen and (max-width: defaults.$sm-breakpoint) {
  .gdoc-nav {
    margin-left: -(defaults.$menu-width);
    font-size: defaults.$font-size-base;

    &__control {
      display: inline-block;
    }
  }

  .gdoc-header {
    svg.gdoc-icon {
      width: defaults.$font-size-24;
      height: defaults.$font-size-24;
    }
  }

  .gdoc-brand {
    font-size: defaults.$font-size-24;
    line-height: defaults.$font-size-24;

    &__img {
      display: none;
    }
  }

  .gdoc-menu-header {
    &__items {
      display: none;
    }

    &__control,
    &__home {
      display: flex;
    }
  }

  .gdoc-error {
    padding: defaults.$padding-96 defaults.$padding-16;

    svg.gdoc-icon {
      width: defaults.$font-size-96;
      height: defaults.$font-size-96;
    }

    &__message {
      padding-left: defaults.$padding-32;
    }

    &__line {
      padding: defaults.$padding-4 0;
    }

    &__title {
      font-size: defaults.$font-size-32;
    }
  }

  .gdoc-page__header .breadcrumb,
  .hidden-mobile {
    display: none;
  }

  .flex-mobile-column {
    flex-direction: column;

    &.gdoc-columns {
      margin: defaults.$padding-32 0;
    }

    .gdoc-columns__content {
      min-width: auto;
      margin: 0;
    }
  }

  #menu-control:checked ~ main {
    .gdoc-nav nav,
    .gdoc-page {
      transform: translateX(defaults.$menu-width);
    }

    .gdoc-page {
      opacity: 0.25;
    }
  }

  #menu-control:checked ~ .gdoc-header .gdoc-nav__control {
    svg.gdoc-icon.gdoc_menu {
      display: none;
    }

    svg.gdoc-icon.gdoc_arrow_back {
      display: inline-block;
    }
  }

  #menu-header-control:checked ~ .gdoc-header {
    .gdoc-brand {
      display: none;
    }

    .gdoc-menu-header {
      &__items {
        display: flex;
      }

      &__control {
        svg.gdoc-icon.gdoc_keyboard_arrow_left {
          display: none;
        }
      }
    }
  }
}