@import "colors/index";

/**
 * Dropdown Component
 *
 * Builds on `~styles/components/lists`
 */
.swui-dropdown {
  position: relative;

  &.open {
    .swui-dropdown-menu {
      display: block;
      opacity: 1;
      animation: openAnimation 0.25s;
    }
  }

  .swui-dropdown-toggle {
    cursor: pointer;
    display: inline-block;

    &.disabled {
      cursor: not-allowed;

      > a,
      > button {
        cursor: not-allowed;
      }
    }
  }

  .swui-dropdown-menu {
    position: absolute;
    clear: left;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 180px;
    background: $color-bg-dark;
    box-shadow: $shadow-3;
    margin-top: 10px;
    opacity: 0;
    display: none;
    transition: visibility 0s, opacity .25s ease-out;

    &.align-right {
      left: auto;
      right: 0;
    }

    > ul > li {
      > a,
      > button {
        padding: 3px 20px;
        clear: both;
        line-height: 1.42857143;
        white-space: nowrap;
        width: 100%;
        text-align: left;
        background: transparent;
        box-shadow: none;
        color: $color-white;
        font-size: .9em;
      }
    }
  }

  @keyframes openAnimation {
    0%   { transform: translateY(-25px); }
    100% { transform: translateY(0px); }
  }
}