@import '@bolt/core-v3.x';

bolt-dropdown {
  display: block;

  @include bolt-css-vars(
    (
      --c-bolt-nav-item-opacity: 0,
      --c-bolt-nav-item-transform:
        translateY(calc(var(--bolt-spacing-y-large) * -1)),
      --c-bolt-nav-indicator-opacity: 0,
    )
  );

  &[collapse] {
    @include bolt-mq(small) {
      @include bolt-css-vars(
        (
          --c-bolt-nav-item-opacity: 1,
          --c-bolt-nav-item-transform: none,
          --c-bolt-nav-indicator-opacity: 1,
        )
      );
    }
  }
}

.c-bolt-dropdown {
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px 1px rgba(6, 10, 36, 0.1);
  background-color: var(--m-bolt-bg);
}

.c-bolt-dropdown__header {
  display: flex;
  position: relative;
  z-index: 10;
  margin: 0;
  font-size: var(--bolt-type-font-size-medium);
  font-weight: var(--bolt-type-font-weight-semibold);
  line-height: var(--bolt-type-line-height-medium);
  box-shadow: 0 1px 2px 0 var(--m-bolt-border);
  background-color: var(--m-bolt-bg);

  .c-bolt-dropdown--collapse\@small & {
    @include bolt-mq(small) {
      display: none;
    }
  }

  &:after {
    content: '';
    display: block;
    opacity: bolt-opacity(0);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    background-color: transparent;
    background-color: var(--m-bolt-link);
    transition: opacity 0.1s ease;
  }
}

.c-bolt-dropdown__header:hover:after {
  opacity: 0.05;
}

.c-bolt-dropdown__header:active:after {
  opacity: 0.15;
}

.c-bolt-dropdown__header-button,
.c-bolt-dropdown__header-label {
  display: flex;
  justify-content: space-between;
  align-items: center; // vertical align
  -webkit-appearance: none;
  position: relative;
  width: 100%;
  margin-bottom: 0;
  padding: var(--bolt-spacing-y-small) var(--bolt-spacing-x-small);
  font: inherit;
  font-size: var(--bolt-type-font-size-medium);
  font-weight: var(--bolt-type-font-weight-semibold);
  color: var(--m-bolt-link);
  line-height: var(--bolt-type-line-height-medium);
  text-align: left; // otherwise some dropdown menus are center aligned in the Shadow DOM
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: none;
  background-color: transparent;
  background-color: var(--m-bolt-bg);

  outline-offset: -3px;
  outline-width: 2px;

  &:-moz-focusring {
    // Firefox specific fix for removing the dotted outline
    outline: none;
  }

  .c-bolt-dropdown__header--center & {
    justify-content: center;
  }
}

.c-bolt-dropdown__header-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  outline-offset: -3px;

  &:focus,
  &:active {
    width: auto;
    height: auto;
    overflow: visible;
    margin: 0;
    clip: auto;
    white-space: inherit;
  }
}

.c-bolt-dropdown__toggle--open {
  display: block;
}

.c-bolt-dropdown__state:target
  + .c-bolt-dropdown
  .c-bolt-dropdown__header-link--open,
.c-bolt-dropdown__state:checked
  + .c-bolt-dropdown
  .c-bolt-dropdown__header-link--open {
  display: none;
}

.c-bolt-dropdown__header-link--close {
  display: none;
}

.c-bolt-dropdown__state:target
  + .c-bolt-dropdown
  .c-bolt-dropdown__header-link--close,
.c-bolt-dropdown__state:checked
  + .c-bolt-dropdown
  .c-bolt-dropdown__header-link--close {
  display: block;
}

.c-bolt-dropdown__state:target
  + .c-bolt-dropdown
  .c-bolt-dropdown__header-link--close {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.c-bolt-dropdown__content {
  display: none;
  position: relative;
  left: 0;
  transform: translateY(-100px);
  z-index: 1;
  width: 100%;
  height: 0;
  overflow: auto;
  box-shadow: 0 1px 2px 1px rgba(6, 10, 36, 0.1);
  transition: all 0.2s cubic-bezier(0, 0, 0.3, 1) 0.1s;

  &[data-open]:not([style*='height']) {
    visibility: visible;
    height: auto;
    transition: none;
  }

  &:not([role='region']) {
    display: block;
    visibility: hidden;
    height: auto;
    max-height: 0px; // Height of bar
  }

  .c-bolt-dropdown--collapse\@small & {
    @include bolt-mq(small) {
      display: block;
      visibility: visible;
      transform: translate3d(0, 0, 0);
      height: auto;
      max-height: none;
    }
  }
}

.c-bolt-dropdown__header-icons {
  display: inline-flex;
  flex-shrink: 0; // for when there is a very long title - adds left/right spacing
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden; // so transformed icons don't spill out
  margin-top: calc(var(--bolt-spacing-y-xsmall) * -1);
  margin-right: calc(var(--bolt-spacing-x-small) * -1);
  margin-bottom: calc(var(--bolt-spacing-y-xsmall) * -1);

  &:before {
    content: '';
    opacity: 0.1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background-color: var(--m-bolt-link);

    .c-bolt-dropdown__header--center & {
      display: none;
    }
  }
}

.c-bolt-dropdown__header-icons-inner {
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}

.c-bolt-dropdown__header-icon {
  display: inline-block;
  position: relative;
  padding: calc(1.5rem / 2);
  font-size: 1.5rem;
  line-height: 0; // Workaround to line-height messing up icon alignment
  vertical-align: middle;
  transition: opacity 0.2s ease;

  & ~ * {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(180deg);
  }
}

[aria-expanded='false'] {
  .c-bolt-dropdown__header-icons-inner {
    transform: rotate(0deg);
  }

  .c-bolt-dropdown__header-icon--open {
    opacity: bolt-opacity(100);
  }

  .c-bolt-dropdown__header-icon--close {
    opacity: bolt-opacity(0);
  }
}

[aria-expanded='true'] {
  .c-bolt-dropdown__header-icons-inner {
    transform: rotate(179.5deg);
  }

  .c-bolt-dropdown__header-icon--open {
    opacity: bolt-opacity(0);
  }

  .c-bolt-dropdown__header-icon--close {
    opacity: bolt-opacity(100);
  }
}

.c-bolt-dropdown__state:target + .c-bolt-dropdown .c-bolt-dropdown__content,
.c-bolt-dropdown__state:checked + .c-bolt-dropdown .c-bolt-dropdown__content {
  visibility: visible;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  max-height: 250px;
  transition: all 0.2s cubic-bezier(0, 0, 0.3, 1) 0.1s;
  transition: transform 300ms ease, height 300ms ease;
}

.c-bolt-dropdown__content--open {
  display: block;
  transform: translate3d(0, 0, 0);
  transition: height 0.2s ease;
}

.c-bolt-dropdown__content-inner {
  opacity: bolt-opacity(0);
  position: relative;
  overflow: auto;
  padding-top: var(--bolt-spacing-y-xsmall);
  padding-bottom: var(--bolt-spacing-y-xsmall);
  transition: opacity 0.1s ease;
  -webkit-overflow-scrolling: touch;

  .c-bolt-dropdown--collapse\@small & {
    @include bolt-mq(small) {
      opacity: bolt-opacity(100);
    }
  }

  &:after {
    content: '';
    display: block;
    opacity: bolt-opacity(100);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: transparent;
    background-color: var(--m-bolt-bg);

    filter: contrast(80%) brightness(110%);
    transition: opacity 0.1s ease;
  }
}

.c-bolt-dropdown__state:target
  + .c-bolt-dropdown
  .c-bolt-dropdown__content-inner,
.c-bolt-dropdown__state:checked
  + .c-bolt-dropdown
  .c-bolt-dropdown__content-inner,
.c-bolt-dropdown__content--opened .c-bolt-dropdown__content-inner {
  opacity: bolt-opacity(100);
  transition: opacity 0.3s ease;
}

.c-bolt-dropdown__toggle-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(0 0 99.9% 99.9%);
  clip-path: inset(0 0 99.9% 99.9%);
}

.c-bolt-dropdown__state {
  display: none;
}

.c-bolt-dropdown__content--open {
  overflow: hidden;
}

.c-bolt-block-list {
  display: block;
}

.c-bolt-block-list__item {
  display: block;
  position: relative;
  z-index: 1;
}

.c-bolt-nav__item {
  opacity: var(--c-bolt-nav-item-opacity, 1);
  transform: var(--c-bolt-nav-item-transform, none);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;

  .c-bolt-dropdown--collapse\@small & {
    @include bolt-mq(small) {
      opacity: bolt-opacity(100);
      transform: translateY(0);
    }
  }
}

@for $quantity from 1 through 12 {
  $time: 0;

  @for $i from $quantity through 1 {
    $time: $time + 50;

    .c-bolt-nav__item:nth-last-child(n + #{$quantity}),
    .c-bolt-nav__item:nth-last-child(n + #{$quantity})
      ~ .c-bolt-nav__item:nth-child(#{$i}) {
      transition-delay: $time + ms;
    }
  }
}

.c-bolt-dropdown__state:target + .c-bolt-dropdown .c-bolt-nav__item,
.c-bolt-dropdown__state:checked + .c-bolt-dropdown .c-bolt-nav__item,
.c-bolt-dropdown__content--opened .c-bolt-nav__item {
  @include bolt-css-vars(
    (
      --c-bolt-nav-item-opacity: 1,
      --c-bolt-nav-item-transform: none,
    )
  );
}

.c-bolt-dropdown__content--opened {
  @include bolt-css-vars(
    (
      --c-bolt-nav-item-opacity: 1,
      --c-bolt-nav-item-transform: none,
      --c-bolt-nav-indicator-opacity: 1,
    )
  );
}

.c-bolt-dropdown__content:not(.c-bolt-dropdown__content--open):not(.c-bolt-dropdown__content--opened) {
  @include bolt-css-vars(
    (
      --c-bolt-nav-indicator-transform: -100px,
    )
  );
}

// Using component-specific class instead of utility class so we don't have to include the whole height utils library
.c-bolt-dropdown--height-auto {
  height: auto !important; // !important to overwrite inline styles
}