/* On-hover dropdown menus adapted from Bootstrap
 * Bootstrap v3.4.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
**/

.dropdown {
  margin: -1px 0 0 0;
  position: relative;
  cursor: pointer;
  list-style: none;

  a {
    text-decoration: none;
  }
}

.dropdown__menu {
  display: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  list-style: none;
  background-color: $light-grey;
  border: 1px solid $warm-black;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;

  > li {
    display: block;
  }
}

.dropdown__link {
  display: block;
  padding: $spacing-03;
  clear: both;
  white-space: nowrap;
  color: $warm-black;
  font-weight: 400;
  text-transform: none;
  line-height: 1;
  @include typescale-06;

  &:hover,
  &:active,
  &:focus {
    color: $warm-black;
    text-decoration: none;
    background-color: $grapefruit;
  }
}

.dropdown__link--disabled {
  cursor: not-allowed;
  color: rgba($warm-black, 0.45);

  &:hover,
  &:active,
  &:focus {
    color: rgba($warm-black, 0.45);
  }
}

.open > .dropdown__menu {
  display: block;
}

@media (min-width: 769px) {
  // Only display dropdown menu on hover in desktop
  .dropdown:hover .dropdown__menu {
    display: block;
  }
}
