.kara-dropdown {
  .kara-dropdown-current {
    display: flex;
  }

  .kara-dropdown-current > span {
    flex: auto;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .kara-dropdown-ul {
    position: absolute;
    margin: 0 auto;
    padding: 0;
    border: 1px solid #b2b2b2;
    list-style-type: none;
  }

  &-grey {
    background: #e8e8e8;
    border: 1px solid #b2b2b2;
    color: #898989;

    .kara-dropdown-ul {
      background: #f1f1f1;
    }
  }

  &-orange {
    background: #fff;
    border: 1px solid #ddd;
    color: #464646;

    .kara-dropdown-ul {
      background: #f1f1f1;
    }

    .kara-dropdown-icon {
      background: #ed7612;
      color: #fff;
    }

    .kara-dropdown-li:hover {
      background-color: #ed7612;
    }
  }

  &-default {
    width: 184px;
    font-size: 14px;

    .kara-dropdown-current > span {
      height: 28px;
      line-height: 28px;
      padding: 0 18px;
    }

    .kara-dropdown-icon {
      display: inline-block;
      flex: 30px 0 0;
      width: 30px;
      height: 28px;
      line-height: 28px;
      font-size: 8px;
      text-align: center;
    }

    .kara-dropdown-li {
      width: 146px;
      height: 28px;
      line-height: 28px;
      padding: 0 18px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }

  &-sm {
    width: 68px;
    font-size: 14px;

    .kara-dropdown-current > span {
      height: 28px;
      line-height: 28px;
      padding: 0 18px;
    }

    .kara-dropdown-icon {
      display: inline-block;
      flex: 22px 0 0;
      width: 8px;
      height: 8px;
      line-height: 28px;
      font-size: 8px;
      text-align: center;
    }

    .kara-dropdown-li {
      width: 32px;
      height: 28px;
      line-height: 28px;
      padding: 0 18px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }

  &-md {
    width: 250px;
    font-size: 14px;

    .kara-dropdown-current > span {
      height: 28px;
      line-height: 28px;
      padding: 0 18px;
    }

    .kara-dropdown-icon {
      display: inline-block;
      flex: 30px 0 0;
      width: 30px;
      height: 28px;
      line-height: 28px;
      font-size: 8px;
      text-align: center;
    }

    .kara-dropdown-li {
      width: 212px;
      height: 28px;
      line-height: 28px;
      padding: 0 18px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}