@import "settings.breakpoints";
@import "settings.colors";
@import "settings.vars";
@import "settings.z-index";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";
@import "mixins/objects.panels";

$panel-inner-width: rem(900);
$panel-inner-width-tablet-portrait: rem(650);
$panel-inner-width-mobile: rem(580);
$default-panel-animation-time: 0.25s;

// silent classes
%panel-a {
  color: $color-white;
  letter-spacing: rem(0.4);
  &:hover,
  &:focus {
    color: $color-grey-300;
  }
  &:active {
    color: $color-grey-600;
  }
}

///////////////////////////////
// Panel Objects
///////////////////////////////
.o-panel {
  transform: translate3d(0, 0, 0);
  background-color: $color-grey-800;
  height: auto;
  margin: 0 auto;
  padding: rem(10) 0 0 0;
  max-width: rem($max-width);
  min-width: rem($min-width);
  opacity: 0;
  position: fixed;
  top: rem(50);
  width: 100%;
  right: 0;
  left: 0;
  z-index: $z-index-panel;
  pointer-events: none;
  transition: opacity $default-panel-animation-time ease-out;
  bottom: 0;

  @include non-scrollable-panel;
}

.o-panel--opening,
.o-panel--opened {
  opacity: 1;
  pointer-events: inherit;
}

.c-header-nav {
  ~ .o-panel {
    top: rem(153);
  }
}

.c-header-nav--fixed {
  ~ .o-panel {
    top: rem(50);
  }
}

///////////////////////////////
// Panel Objects - scrollable
///////////////////////////////
.o-panel-scrollable {
  @include scrollable-panel;

  display: none;
  position: relative;
  height: calc(100% - #{rem(65)});
  width: calc(100% + #{rem(40)});
  margin-left: rem(-20);
}

.o-panel-scrollable--opened {
  display: block;
}

///////////////////////////////
// Panel Objects - categories
///////////////////////////////
.o-panel-categories {
  display: none;
  color: $color-white;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
  margin: 0 auto;
  max-width: $panel-inner-width;
  padding: 0;
  white-space: nowrap;
}

.o-panel-categories--opened {
  display: flex;
}

.o-panel-categories__section {
  padding: 0 rem(10);
  width: 40%;
  height: 100%;
}

.o-panel-categories__section--accordion {
  width: 60%;
}

.o-panel-categories__sub-section {
  padding: 0 0 rem(20) 0;
}

.o-panel__h3 {
  @include font-gm-sans-bold;
  color: $color-white;
  font-size: rem(12);
  text-transform: uppercase;
  width: 100%;
  margin: 0;
  letter-spacing: rem(1);
  padding: rem(5) 0;
}

.o-panel__h3--categories {
  color: $color-grey-300;
  padding: 0 0 rem(10) 0;
}

///////////////////////////////
// Panel Objects - search
///////////////////////////////
.o-panel-search {
  display: none;
  flex-direction: column;
  margin: 0 auto;
  max-width: $panel-inner-width;
  padding: rem(55) 0 0 0;
  height: 100%;
}

.o-panel-search--opened {
  display: flex;
}

.o-panel-search__section {
  width: 100%;
  padding: 0 0 rem(20);
}

///////////////////////////////
// Panel Objects - results
///////////////////////////////
.o-panel-results {
  @include font-gm-sans;
  margin: 0;
  padding: 0;
  color: $color-white;
  border-top: 2px solid $color-grey-700;
}

.o-panel-results__item {
  margin: 0;
  padding: rem(10) 0;
  display: flex;
  list-style: none;
  border-bottom: 1px solid $color-grey-700;
  cursor: pointer;
  font-size: rem(14);
  letter-spacing: rem(1);

  &:hover {
    .o-panel-results__item__a {
      text-decoration: underline;
    }
  }
}

.o-panel-results__item__a {
  color: $color-white;
  text-decoration: none;

  &:focus {
    text-decoration: underline;
  }
}

.o-panel-results__item__code {
  line-height: rem(14);
  min-width: rem(90);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.o-panel-results__item__text {
  flex: 5;
}

.o-panel-results__item__symbol {
  font-size: rem(11);
}

.o-panel-footer {
  height: rem(120);
}

.o-panel-footer__text {
  @include font-gm-sans;
  color: $color-white;
  font-size: rem(12);
  text-align: center;
  letter-spacing: rem(0.4);
}

///////////////////////////////
// Panel Objects - footer
///////////////////////////////

.o-panel-footer {
  padding: rem(10) 0;
}

.o-panel-footer__a {
  @extend %panel-a;
  padding: 0 rem(10);
}

.o-panel-footer__text {
  @include font-gm-sans;
  color: $color-white;
  font-size: rem(12);
  text-align: center;
  letter-spacing: rem(0.4);
}

///////////////////////////////
// Panel Objects - bg area
///////////////////////////////
.o-panel-bg-area {
  background-color: $color-white;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  cursor: pointer;
  z-index: $z-index-panel-bg;
}

.o-panel-bg-area--closed {
  visibility: hidden;
  display: none;
}

///////////////////////////////
// Panel Objects - quick links
///////////////////////////////
.o-panel-ql {
  font-size: rem(14);
  line-height: 1;
}

.o-panel-ql__a {
  @extend %panel-a;
  @include font-gm-sans;
  margin-right: rem(18);
  padding-bottom: rem(12); // font-size * arbitrary space
  display: inline-block;
}

///////////////////////////////
// panel breakpoints
///////////////////////////////
.o-panel-scrollable--categories {
  .c-control--close-bottom {
    display: none;
  }
}

@include desktop-down {
  .c-header-nav {
    ~ .o-panel {
      top: rem(60);
    }
  }

  .c-header-nav--fixed {
    ~ .o-panel {
      top: rem(50);
    }
  }

  .o-panel {
    padding: rem(20) 0 0 0;
  }
}

@include tablet-portrait-only {
  .o-panel {
    @include scrollable-panel;
  }

  .o-panel-scrollable {
    @include non-scrollable-panel;
  }

  .o-panel-categories {
    align-content: flex-start;
    flex-direction: row;
    max-width: $panel-inner-width-mobile;
    min-height: rem(880);
    height: auto;
    overflow: visible;
  }

  .o-panel-categories__section {
    width: 100%;
    padding: 0 0 rem(10) 0;
    flex: inherit;

    .o-panel__h3--categories {
      padding: 0 0 rem(10) 0;
    }
  }

  .o-panel-categories__section--accordion {
    width: 100%;
  }

  .o-panel-categories__section--flex {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: auto;
    overflow: auto;
    height: rem(360);
  }

  .o-panel-categories__sub-section {
    width: 50%;
    height: auto;

    // text resizer
    &:nth-child(3) {
      padding: 0 0 rem(10) rem(10);
    }
  }

  .o-panel-search {
    max-width: $panel-inner-width-tablet-portrait;
  }
}

@include mobile-only {
  .o-panel {
    padding: 0 rem(10);

    @include scrollable-panel;
  }

  .o-panel-scrollable {
    @include non-scrollable-panel;

    width: 100%;
    height: auto;
    display: block;
    margin: 0;
  }

  .o-panel-scrollable--categories {
    .c-control--close-top {
      display: none;
    }
  }

  .o-panel-search,
  .o-panel-categories {
    display: block;
    height: auto;
    overflow: visible;
  }

  .o-panel-categories {
    padding: 0 0 rem(50) 0;
  }

  .o-panel__h3 {
    color: $color-grey-300;
  }

  .o-panel-categories__section {
    width: 100%;
    padding: rem(10) 0;
    display: block;
    flex: inherit;
  }

  .o-panel-categories__section--flex {
    display: block;
    height: 100%;
  }

  .o-panel-categories__sub-section {
    width: 100%;
    height: auto;

    &:nth-child(2) {
      height: auto;
    }

    &:nth-child(3) {
      padding: 0 0 rem(20) 0;
    }
  }

  .o-panel-results__item,
  .o-panel-results {
    font-size: rem(12);
  }

  .o-panel-ql, .o-panel-ql__a {
    margin-bottom: rem(6);
  }

  .o-panel-results__item__code {
    min-width: rem(60);
  }

  .o-panel-results__item__text {
    flex: 2;
  }

  // a more specific selector is needed here to override the right value
  .c-control--close.c-control--close-top,
  .c-control--close.c-control--close-bottom {
    right: rem(2);
  }

  // a more specific selector is needed here to override the display value
  .c-control--close.c-control--close-bottom {
    display: block;
  }
}
