Dropdown.scss

@import "../common.scss";

.Dropdown {
  display: inline-block;
  position: relative;
  outline: none;

  .Dropdown-menu {
    margin-top: 5px;
    padding: 5px 0;
    background: $dark-blue;
    border-radius: 6px;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 30;
    transition: all 0.1s ease-in;
    transform-origin: 50% 0 0;
    opacity: 0;

    &.Dropdown-menu--shown {
      opacity: 1;
    }

    ul {
      display: block;
      margin: 0 -1px;
      padding: 0;
      list-style-type: none;
      font-size: 1.5rem;
    }
    li {
      min-width: 4em;
      padding: 1rem;
      background: $dark-blue;
      text-align: left;
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
      color: $white;
      transition: all 0.1s ease-in;

      &:hover {
        background: lighten($dark-blue, 5%);
      }
      .Icon {
        color: lighten($theme-color-light, 13%);
      }
    }
  }
}