@import "../variables/mixins";
@import "../variables/colors";
@import "../variables/sizes";

// Append a standard dropdown triangle icon next to he right of the text of the link, like "foobar v".
// Usage is as simple as:
//   <a href="#" class="DropdownLink">My text</a>
//
// To adapt color (e.g. to use on a dark background) you can use the white icon like:
//   <a href="#" class="DropdownLink DropdownLink--white">My text</a>

.DropdownLink {
  position: relative;
  padding-right: $sMargin-elementInline;
  cursor: pointer;

  &::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 0;
    height: 0;
    border-top: 4px solid $cIcons-default;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
  }

  &:hover {
    &::after {
      border-top-color: $cIcons-active;
    }
  }
}

.Dropdownlink--secondary {
  &::after {
    border-top-color: $cTypography-secondary;
  }

  &:hover {
    border-top-color: $cTypography-secondary;

    &::after {
      border-top-color: $cTypography-secondary;
    }
  }
}

.DropdownLink--white {
  &::after {
    border-top-color: white;
  }

  &:hover {
    border-top-color: white;

    &::after {
      border-top-color: white;
    }
  }
}