@import "../base/variables";
@import "../base/mixins";
@import "../mixins/transition";
@import "../utilities/header";

@mixin rotate($value) {
  transform: rotate($value);
  -webkit-transform: rotate($value);
  -moz-transform: rotate($value);
  -o-transform: rotate($value);
}

$transition-duration: 250ms;
$offset-top: 115px;

.som-mobile-subheader {
  @include transition(all, 0.3s);

  .invisible {
    visibility: hidden;
  }

  .truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__title-bar {
    border: 0;
    margin: 0;
    width: 100%;
    // height: $header-height-mb;
    //border-bottom: 1px solid $border-color;
    background: $light-gray;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .5rem .5rem 1rem;
    color: $header-copy;
    border-bottom: 1px solid $border-color;
    @include text-type(5, 700);
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, .12);
    z-index: $mobile-subheader-index;

    &__toggle-button {
      font-size: 1.5rem;
      color: $white;
      position: relative;
      padding: 10px;
      line-height: 1;
      background: $primary;
      border: none;
      border-radius: 2px;
      display: block !important;
    }
  }

  /* The Overlay (background) */
  &__overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: $mobile-subheader-index;
    left: 0;
    background: $overlay-background;

    // Animate when top position changes
    top: $header-height;

    @include media-breakpoint-down(lg) {
      top: $header-height-mb;
    }

    //@include transition(top, $transition-duration);

    // &.invisible {
    //   left: 15000rem;
    // }

    &-content {
      position: relative;
      background-color: $white;
      left: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      width: calc(100% - 3.5rem) !important; // 3.5rem is the side of the hamburger menu
      height: 100%;
      max-width: 30rem;
      //padding-bottom: $header-height-mb;

      // Animate when opacity changes
      opacity: 0;
      max-height: calc(100vh - 112px); //($header-height-mb * 2);
      @include transition(opacity, $transition-duration);

      // &:not(.opened) {
      //   box-shadow: 0 0 0 0;
      //   left: -100%;

      //   &.panel-size-lg {
      //     left: -100%;
      //   }
      // }

      // &.opened {
      //   opacity: 1;
      // }

      // &__nav-container {
      //   position: relative;
      //   height: 100%;
      //   width: 100%;
      //   overflow-y: auto;
      //   display: flex !important;
      //   flex-direction: column !important;
      // }
    }
  }

  /* Panel */
  &__panel {
    .panel {
      width: calc(100% - 3.5rem) !important; // 3.5rem is the side of the hamburger menu
      top: $offset-top;
      border-top: 1px solid $border-color;
      box-shadow: none !important;

      .panel-content {
        height: calc(100dvh - $offset-top);
        box-shadow: inset 0 0 12px 0 rgba($black, 0.2) !important;
        overflow-y: auto;
      }

      &::backdrop {
        top: $offset-top;
      }
    }
  }

  &__close-btn {
    position: fixed;
    top: 64px;
    right: 8px;
    padding: 0;
    background: none;;
    border: none;
  }
}