@import "settings.colors";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";
@import "mixins/components.button";
@import "mixins/components.tooltip";

// Passed as an argument to various mixins (see below)
$c-dropdown-menu-root-class: "c-dropdown-menu";

.c-dropdown-menu {
  @include c-tooltip;

  .c-button--full-width {
    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 {
      @include css-variables("font-size", 12);
      line-height: 1;
    }
  }

  .c-dropdown-menu__dismiss {
    position: absolute;
    top: 0;
    right: 0;

    // button overrides
    width: rem(32);
    height: rem(32);
    min-width: rem(32);
    min-height: rem(32);

    .c-button__icon {
      min-width: auto;
      width: rem(12);
      height: rem(12);
    }
  }

  .c-dropdown-menu__close {
    justify-content: center;
    .c-button__text {
      @include font-gm-sans;
      @include css-variables("font-size", 14);
      line-height: line-height(14, 16);
      letter-spacing: rem(0.3);
      color: $color-grey-660;
    }
    &:hover {
      .c-button__text {
        color: $color-grey-300; // TODO: increase contrast to 4.5:1 or higher
      }
    }
    &,
    &:hover,
    &:focus,
    &:active {
      background-color: transparent;
      .c-button__text {
        text-transform: none;
        text-decoration: underline;
      }
    }
  }
}

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

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

.c-dropdown-menu__inner {
  @include c-tooltip-inner;
  width: rem(170);

  .c-button {
    text-align: left;
  }
}

// bookmarking reader tip width
.c-dropdown-menu__inner--w200 {
  width: rem(200);
}

.c-dropdown-menu__text {
  @include c-tooltip-text;
  text-transform: none;
  background-color: $color-stone-100;
  display: block;
  + .c-button {
    border-top-width: 1px;
  }
}

.c-dropdown-menu__text--dismiss {
  padding-right: rem(32); // room for dismiss button
}

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

// ------------------------------------
// Alignment and positioning
// ------------------------------------

@include c-tooltip-positions($c-dropdown-menu-root-class);

// ------------------------------------
// Themes
// ------------------------------------

@include c-tooltip-themes($c-dropdown-menu-root-class);

// White
.c-dropdown-menu--white {
  .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
.c-dropdown-menu--dark {
  .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;
  }
}
