@import '~scss/variables';
@import '~scss/mixins';

.wrapper {
  list-style: none;

  & > li {
    display: inline-block;
    position: relative;
    min-width: 128px;
    border-radius: 4px;
    border: 1px solid #c1c9d1;
    padding: 14px 20px 14px 56px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.67;
    cursor: pointer;
    user-select: none;

    :global {
      .icon {
        position: absolute;
        @include vertical-center;
        left: 20px;
      }
    }

    & + li {
      margin-left: 12px;
    }

    &:hover {
      border-color: #329dce;
    }

    &.select {
      border-color: #329dce;
      color: #329dce;

      :global .icon > svg {
        color: #329dce;
      }
    }
  }
}
