@import '../../styles/_variables.scss';

.main {
  height: 22px;
  min-width: 88px;

  display: flex;
  align-items: center;
  align-self: center;
  border: 1px solid $duda-gray;
  border-radius: 20px;

  .color-block {
    box-sizing: border-box;

    position: relative;
    width: 50%;
    height: 100%;
    padding: 0;
    border-radius: 20px 0 0 20px;
    border: none;
    outline: none;

    display: flex;
    justify-content: center;

    &:after {
      content: attr(aria-label);
      position: absolute;
      top: 25px;
      font-size: 10px;
      font-weight: 400;
      font-style: italic;
      color: $font-light-gray;
    }

    &.current-color {
      border-radius: 0 20px 20px 0;
      cursor: pointer;
    }
  }
}