// Drilldown navigation
//
// Drilldown navigation presents a multilevel menu with a maximum of four stacked columns

$vl-drilldown-column-width: 48rem;
$vl-drilldown-column-box-shadow: -12px 0 20px -15px rgba($vl-black, 1) !default;

.vl-drilldown {
  position: relative;

  @include respond-to(small) {
    padding: 0;
  }

  &__column,
  &__subcolumn {
    display: inline-block;
    min-height: 25rem;
    border-right: 1px $vl-border-color solid;
    background: $vl-page-bg;
    vertical-align: top;
  }

  // = first column in the stack
  &__column {
    position: relative;
    width: 33.3333%;

    @include respond-to(medium) {
      width: 40%;
    }

    @include respond-to(small) {
      width: 100%;
      border: 0;
    }
  }

  // = column inside the first column or one of its subcolumns
  &__subcolumn {
    display: none;
    position: absolute;
    top: 0;
    left: calc(100% + 1px);
    width: 100%;
    transition: all 0.3s ease-in-out;
    z-index: 6;
    animation: slideIn 0.3s ease-in-out;

    &--active {
      display: block;
    }

    @include respond-to(small) {
      left: 0 !important; // sass-lint:disable-line no-important
      width: 100%;
      border: 0;
      box-shadow: none;
      animation: slideInMobile 0.4s cubic-bezier(0.59, 0.02, 0.23, 1);
    }

    &__search {
      padding: 1rem;
      border-bottom: 1px $vl-border-color solid;

      &__input {
        display: block;
        width: 100%;
      }
    }

    &__header {
      display: block;

      .vl-drilldown__item__cta--back {
        .vl-vi {
          top: 53%;
        }
      }
    }

    // Title at the top of the subcolumn
    &__title {
      display: block;
      position: relative;
      padding: 0.9rem 5rem 2rem 5.7rem;
      border-bottom: 1px $vl-border-color solid;
      font-family: $vl-accent-font;
      font-size: 2.2rem;
      font-weight: 500;
      line-height: 1.2;
      text-decoration: none;
      z-index: 1;

      &__cta {
        display: block;

        &:focus {
          @include outline;
        }
      }

      span {
        .vl-vi {
          top: 40%;
          color: $vl-action-color;
        }
      }

      @include respond-to(medium) {
        font-size: 2.2rem;
      }

      @include respond-to(small) {
        font-size: 2rem;
      }

      @include respond-to(xsmall) {
        font-size: 1.6rem;
        line-height: 1.4;
      }
    }
  }

  &__list {
    &-wrapper {
      overflow: auto;
    }
  }

  // Subcolumn three column width support
  &[data-vl-drilldown-columns="3"] & {
    &__subcolumn {
      &[data-vl-drilldown-depth="2"] {
        @include respond-to(medium) {
          left: 50%;
          box-shadow: $vl-drilldown-column-box-shadow;
        }
      }
    }
  }

  // Subcolumn four column width support
  &[data-vl-drilldown-columns="4"] & {
    &__subcolumn {
      &[data-vl-drilldown-depth="2"],
      &[data-vl-drilldown-depth="3"] {
        left: 50.7%;
        box-shadow: $vl-drilldown-column-box-shadow;

        @include respond-to(medium) {
          left: 25%;
        }
      }
    }
  }

  // Subcolumn five column width support
  &[data-vl-drilldown-columns="5"] & {
    &__subcolumn {
      &[data-vl-drilldown-depth="2"],
      &[data-vl-drilldown-depth="3"],
      &[data-vl-drilldown-depth="4"] {
        left: 34%;
        box-shadow: $vl-drilldown-column-box-shadow;

        @include respond-to(medium) {
          left: 17.4%;
        }
      }
    }
  }

  // Subcolumn six column width support
  &[data-vl-drilldown-columns="6"] & {
    &__subcolumn {
      &[data-vl-drilldown-depth="2"],
      &[data-vl-drilldown-depth="3"],
      &[data-vl-drilldown-depth="4"],
      &[data-vl-drilldown-depth="5"] {
        left: 25.7%;
        box-shadow: $vl-drilldown-column-box-shadow;

        @include respond-to(medium) {
          left: 13.2%;
        }
      }
    }
  }

  // Item within the column
  &__item {
    &__cta {
      display: block;
      position: relative;
      padding: 1.1rem 5rem 1.1rem 1.6rem;

      transition: background 0.1s ease-in-out;
      color: $vl-action-color;
      font-size: 1.6rem;
      line-height: 1.2;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }

      &:focus {
        @include outline;
      }

      &[aria-hidden="true"] {
        display: none;
      }

      &--active {
        // sass-lint:disable no-important
        background: $vl-accent-color !important;
        color: $vl-mine-shaft;

        &:hover,
        &:focus {
          background: $vl-accent-color;
        }

        &::before {
          color: inherit;
        }
      }

      // Back button on the left stide of the title
      &--back {
        position: absolute;
        top: 0;
        left: 0;
        width: 4.3rem;
        height: 3.9rem;
        border: 0;
        background: none;
        cursor: pointer;
        z-index: 2;

        span {
          @include u-hidden;
        }

        &:hover {
          color: $vl-text-color;

          &::before {
            color: $vl-action-text-hover-color;
          }
        }

        &:focus {
          @include outline;
        }

        &::after {
          position: absolute;
          top: 0.5rem;
          right: 0;
          width: 1px;
          height: 3.4rem;
          background: $vl-border-color;
          content: "";
        }

        @include respond-to(xsmall) {
          padding: 1.1rem 0.4rem 1.5rem 1.6rem;
        }
      }
    }

    &--title {
      position: relative;

      &::before,
      &::after {
        position: absolute;
        bottom: 0;
        width: 1.6rem;
        height: 1px;
        background: $vl-white;
        content: "";
        z-index: 3;
      }

      &::before {
        left: 0;
      }

      &::after {
        right: 0;
      }
    }

    .vl-vi {
      position: absolute;
      top: 50%;
      right: 16px;
      color: $vl-text-color;
      font-size: 1.2rem;
      transform: translateY(-50%);
    }
  }

  // Cover CTA covering the entire column
  &__cta-cover {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: background 0.1s ease-in-out;
    border: 0;
    background: none;
    cursor: pointer;
    z-index: 5;

    span {
      @include u-hidden;
    }

    &:hover {
      outline: 2px solid $vl-outline-color;
      outline-offset: -2px;
    }

    &:focus {
      @include outline;
    }
  }

  // Empty state when search turns blank
  &__empty {
    display: block;
    position: relative;
    padding: 1.1rem 5rem 1.1rem 1.6rem;

    color: $vl-text-color;
    font-size: 1.6rem;
    line-height: 1.2;
    text-decoration: none;
  }
}

// Cover states
// Make cover state active on select amount of elements when depth is deep enough
[data-vl-drilldown-columns="3"] {
  @include respond-to(medium) {
    .vl-drilldown__cta-cover {
      &[data-vl-drilldown-cover="1"] {
        display: block;
      }
    }
  }
}

[data-vl-drilldown-columns="4"] {
  .vl-drilldown__cta-cover {
    &[data-vl-drilldown-cover="1"],
    &[data-vl-drilldown-cover="2"] {
      display: block;
    }
  }
}

[data-vl-drilldown-columns="5"] {
  .vl-drilldown__cta-cover {
    &[data-vl-drilldown-cover="1"],
    &[data-vl-drilldown-cover="2"],
    &[data-vl-drilldown-cover="3"] {
      display: block;
    }
  }
}

[data-vl-drilldown-columns="6"] {
  .vl-drilldown__cta-cover {
    &[data-vl-drilldown-cover="1"],
    &[data-vl-drilldown-cover="2"],
    &[data-vl-drilldown-cover="3"],
    &[data-vl-drilldown-cover="4"] {
      display: block;
    }
  }
}

// Animations

@keyframes slideIn {
  0% {
    display: none;
    opacity: 0;
  }

  1% {
    display: block;
    transform: translateY(-10px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInMobile {
  0% {
    display: none;
    opacity: 0;
  }

  1% {
    display: block;
    transform: translateX(100%) translateY(0);
    opacity: 0;
  }

  100% {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
}