@import "settings.colors";

@import "mixins/tools.mixins";
@import "mixins/components.button";
@import "mixins/components.dropdown-menu";

.c-dropdown-menu {
  position: absolute;
  z-index: 1;
  // The delay is for the "hide" transition, not the "reveal" transition. See:
  // https://stackoverflow.com/questions/20319209/fading-out-a-menus-opacity-with-css-transitions#answer-20328000
  transition: visibility 0s linear 0.2s, opacity 0.2s linear;

  // Dropdown is hidden by default
  @include c-dropdown-menu--hidden;

  // Triangle
  &::after,
  &::before {
    position: absolute;
    right: rem(21);
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
  }
  // Inner triangle
  &::after {
    top: rem(-4);
    border-bottom-color: $color-stone-150;
    border-width: rem(5);
    margin-right: rem(-5);
  }
  // Outer triangle (border)
  &::before {
    top: rem(-8);
    border-bottom-color: $color-stone-300;
    border-width: rem(7);
    margin-right: rem(-7);
  }
  .c-button {
    border-width: 0 0 1px 0;
    padding-left: rem(10);
    padding-right: rem(10);
    justify-content: flex-start; // Left-align text
    &:last-child {
      border-bottom-width: 0;
    }
    .c-button__text {
      font-size: rem(12);
      line-height: 1;
    }
  }
  .c-dropdown-menu__close {
    justify-content: center;
    .c-button__text {
      @include font-gm-sans;
      font-size: rem(14);
      line-height: line-height(14, 16);
      letter-spacing: rem(0.3);
      color: $color-grey-660;
    }
    &:hover {
      .c-button__text {
        color: $color-grey-300;
      }
    }
    &,
    &:hover,
    &:focus,
    &:active {
      background-color: transparent;
      .c-button__text {
        text-transform: none;
        text-decoration: underline;
      }
    }
  }
}

.c-dropdown-menu--open {
  @include c-dropdown-menu--visible;
}

// Align the dropdown menu's arrow to the left instead of the right
.c-dropdown-menu--align-arrow-left {
  // Inner triangle
  &::after {
    left: rem(16);
    right: auto;
  }
  // Outer triangle (border)
  &::before {
    left: rem(14);
    right: auto;
  }
}

// Align the dropdown menu's arrow to the centre instead of the right
.c-dropdown-menu--align-arrow-center {
  // Inner triangle
  &::after {
    left: calc(50% - #{rem(5)}); // Subtract half of shape's width
    right: auto;
  }
  // Outer triangle (border)
  &::before {
    left: calc(50% - #{rem(7)}); // Subtract half of shape's width
    right: auto;
  }
}

.c-dropdown-menu--no-transition {
  transition: none;
}

.c-dropdown-menu__inner {
  width: rem(170);
  margin-top: rem(5);
  background: $color-stone-150;
  border: 1px solid $color-stone-300;
  border-radius: rem(2);
}

.c-dropdown-menu__text {
  @include font-gm-sans;
  font-size: rem(15);
  line-height: line-height(15, 17);
  letter-spacing: rem(.3);
  color: $color-grey-900;
  text-transform: none;
  background-color: $color-stone-100;
  padding: rem(10);
  display: block;
  + .c-button {
    border-top-width: 1px;
  }
}

// Change triangle colour to match text background instead of button background
.c-dropdown-menu--with-text::after {
  border-bottom-color: $color-stone-100;
}

// ------------------------------------
// White theme
// ------------------------------------

.c-dropdown-menu--white {
  // Inner triangle
  &::after {
    border-bottom-color: $color-white;
  }
  // Outer triangle (border)
  &::before {
    border-bottom-color: $color-stone-500;
  }
  .c-dropdown-menu__inner {
    background-color: $color-white;
    border-color: $color-stone-500;
  }
  .c-dropdown-menu__text {
    background-color: $color-stone-100;
  }
  .c-button {
    @include c-button-theme("white-primary");
  }
  // TODO: update colours for this theme (discuss with UX)
  .c-dropdown-menu__close {
    &,
    &:hover,
    &:focus,
    &:active {
      background-color: transparent;
    }
  }
  // Change triangle colour to match text background instead of button background
  &.c-dropdown-menu--with-text::after {
    border-bottom-color: $color-stone-100;
  }
}

// ------------------------------------
// Dark theme
// ------------------------------------

.c-dropdown-menu--dark {
  // Inner triangle
  &::after {
    border-bottom-color: $color-grey-700;
  }
  // Outer triangle (border)
  &::before {
    border-bottom-color: $color-grey-300;
  }
  .c-dropdown-menu__inner {
    background-color: $color-grey-700;
    border-color: $color-grey-300;
  }
  .c-dropdown-menu__text {
    background-color: $color-grey-600;
    color: $color-white;
  }
  .c-button {
    @include c-button-theme($color-grey-700);
  }
  // TODO: update colours for this theme (discuss with UX)
  .c-dropdown-menu__close {
    &,
    &:hover,
    &:focus,
    &:active {
      background-color: transparent;
      .c-button__text {
        color: $color-white;
      }
    }
    & {
      .c-button__text {
        color: $color-white;
      }
    }
    &:hover,
    &:focus,
    &:active {
      .c-button__text {
        color: $color-grey-300;
      }
    }
  }
  // Change triangle colour to match text background instead of button background
  &.c-dropdown-menu--with-text::after {
    border-bottom-color: $color-grey-600;
  }
}
