@import '../../styles/variables';

.Dropdown {
  position: relative;
  display: flex;

  &__title {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    color: $action-color;
    border: 0;
    border-radius: $border-radius;
    background-color: $white;

    &_open {
      box-shadow: 0 0 8px 2px $gray95;

      &::after {
        position: absolute;
        right: 0;
        bottom: -2px;
        left: 0;
        height: 10px;
        content: '';
        pointer-events: none;
        background-color: $white;
      }
    }
  }

  &__icon {
    color: $black;
  }

  &__list {
    position: absolute;
    top: 100%;
    right: 0;
    display: none;
    overflow: hidden;
    border-radius: $border-radius;
    background: $white;
    box-shadow: 0 0 8px 2px $gray95;

    &_open {
      display: block;
    }
  }

  &__item {
    border-bottom: 1px solid $gray95;

    &:last-child {
      border-bottom: 0;
    }

    > * {
      display: block;
      overflow: hidden;
      width: 100%;
      margin: 0;
      padding: 9px 15px;
      cursor: pointer;
      text-align: right;
      white-space: nowrap;
      text-overflow: ellipsis;
      border: 0;
      background: transparent;
      font-size: 14px;
      color: $action-color;

      &:hover,
      &:focus {
        outline: 0;
        background: lighten($gray95, 5%);
      }
    }
    &_danger {
      color: $error-color;
    }
  }
}