@import './var.less';

:root {
  --rv-selector-color: var(--rv-gray-2);
  --rv-selector-checked-color: #efefff;
  --rv-selector-text-color: var(--rv-text-color);
  --rv-selector-checked-text-color: var(--rv-primary-color);
  --rv-selector-border: none;
  --rv-selector-checkedborder: none;
  --rv-selector-border-radius: var(--rv-border-radius-sm);
  --rv-selector-margin: 0 var(--rv-padding-xs) 0 0;
  --rv-selector-padding: var(--rv-padding-xs) var(--rv-padding-md);
}

.rv-selector {
  overflow: hidden;
  font-size: var(--rv-font-size-md);
  line-height: 1.4;

  .rv-space.rv-space {
    --gap: 12px;
  }

  &__item {
    margin: var(--rv-selector-margin);
    padding: var(--rv-selector-padding);
    position: relative;
    background-color: var(--rv-selector-color);
    border: var(--rv-selector-border);
    border-radius: var(--rv-selector-border-radius);
    color: var(--rv-selector-text-color);
    opacity: 1;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    overflow: hidden;
    vertical-align: top;

    &:last-child {
      margin-right: 0;
    }

    &-description {
      font-size: var(--rv-font-size-sm);
      color: var(--rv-text-color-weak);
    }

    &--active,
    &--multiple-active {
      color: var(--rv-selector-checked-text-color);
      background-color: var(--rv-selector-checked-color);
      border: var(--rv-selector-checked-border);
    }

    .rv-selector__check-mark-wrapper {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 0;
      height: 0;
      border-top: solid 8px transparent;
      border-bottom: solid 8px var(--rv-primary-color);
      border-left: solid 10px transparent;
      border-right: solid 10px var(--rv-primary-color);
      > svg {
        position: absolute;
        left: 0;
        top: 0;
        height: 6px;
        width: 8px;
      }
    }

    &--disabled {
      cursor: not-allowed;
      opacity: 0.4;
    }
  }
}