@import "./../../styles/typography";
@import "./../../styles/color";

.one-ui-select-list {
  $root: &;

  .one-ui-button {
    @include font('s-13');
    color: color('dark', 5);
    padding: 0;

  }

  &--type-button {
    #{$root}__item {
      border-radius: 0;
      margin-right: 1px;

      &--active{
        color: white;
        &:hover{
          background-color: color(key);
        }
      }
    }
  }
  &--type-block {
    #{$root}__item {
      &--active{
        background-color: color(key);
        color: white;
        svg{
          .fill{ fill: white;}
          .stroke{ stroke: white;}
        }
      }
    }
  }

  .one-ui-select-list__item {
    padding: 10px;
    width: 100%;
    color: #52575C;
    display: flex;
    align-items: flex-end;
    &:hover {
      background: #fff;
      .one-ui-description {
        font-weight: bold;
      }
      &:first-child {
        border-top-left-radius:  8px;
        border-top-right-radius: 8px;
      }
      &:last-child {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
      }
    }
  }

}