@import "vars";

// dropdown.js
// ===================================================

.dropdownjs {
  position: relative;

  * {
    box-sizing: border-box;
  }

  > input {
    width: 100%;
    padding-right: 30px;
    text-overflow: ellipsis;

    &.focus ~ ul {
      // .scale(1);
      transform: scale(1);
    }
  }

  > ul {
    position: absolute;
    padding: 5px 0;
    margin: 0;
    min-width: 200px;
    // .scale(0);
    transform: scale(0);
    z-index: 10000;

    &[placement=top-left] {
      transform-origin: bottom left;
      bottom: 0;
      left: 0;
    }

    &[placement=bottom-left] {
      // .transform-origin(top left);
      transform-origin: top left;
      top: 0;
      left: 0;
    }

    > li {
      margin: 2px 0;
      padding: 6px 13px;
      list-style: none;

      &.dropdownjs-add {
        padding: 0;

        > input {
          width: 100%;
          padding: 6px 13px;
          border: 0;
        }
      }
    }
  }

  /* Theme */
  > input[readonly] {
    cursor: pointer;
  }

  select[data-dropdownjs][disabled] + & > input[readonly] {
    cursor: default;
  }

  > ul {
    max-width: 500px;
    background: #FFF;
    overflow: auto;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s ease-out;

    > li {
      cursor: pointer;
      word-wrap: break-word;

      &.selected,
      &:hover,
      &:active {
        background-color: #eaeaea;
      }

      &:focus {
        outline: 0;
        outline: 1px solid #d4d4d4;
      }

      > .close:before {
        content: "\00d7";
        display: block;
        position: absolute;
        right: 15px;
        float: right;
        font-size: 21px;
        font-weight: 700;
        line-height: 1;
        color: #000;
        text-shadow: 0 1px 0 #fff;
        opacity: .6;
      }

      &:hover > .close:hover:before {
        opacity: .9;
      }
    }
  }
}