@ruliad-engr/forms/dist/css/form/Field/Select/Select.css

Forms fields, inputs, etc.

.form-select {
  position: relative;
  &__wrapper {
    background: var(--color-surface-primary);
    &:hover {
      background: var(--color-surface-primary-hover);
    }
  }
  &_state_success {
    ^&__control {
      border: solid 1px var(--color-success-border-primary);
    }
  }
  &_state_error {
    ^&__control {
      border: solid 1px var(--color-error-border-primary);
    }
  }
  &__control {
    border: solid 1px var(--color-surface-border-secondary);
    border-radius: 6px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    cursor: default;
    outline: 0 !important;
    @mixin text-m;
    ^&__value-container {
      padding: 16px 16px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex: 1;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      ^^&__single-value {
        color: var(--color-surface-text-primary);
        @mixin text-m;
      }
      ^^&__placeholder {
        color: var(--color-surface-text-primary);
        @mixin text-m;
      }
      ^^&__input-container {
        flex: 1;
        visibility: visible;
        @mixin text-m;
      }
      &--is-multi {
        padding: 13px 24px 13px 16px;
        @media (--mobile) {
          padding: 13px 24px 13px 16px;
        }
        + ^^^&__indicators {
          @media (--mobile) {
            padding: 12px 16px 0 0;
            align-self: stretch;
          }
        }
        ^^^&__placeholder {
          padding: 4px 0 8px 4px;
        }
        ^^^&__input-container {
          padding: 4px 8px;
        }
      }
      ^^&__multi-value {
        background: var(--color-surface-tertiary);
        margin: 1px;
        border-radius: 4px;
        position: relative;
        display: flex;
        gap: 4px;
        &__label {
          color: var(--color-surface-text-primary);
          padding: 4px 0 4px 8px;
          @mixin text-l 300;
        }
        &__hide-label{
          opacity: 0;
           @media (--mobile) {
            display: none;
          }
        }
        &__remove {
          color: var(--color-accent-item);
          padding: 3px 8px 4px 8px;
          cursor: pointer;
          &:hover {
            background: var(--color-accent-hover);
          }
          & svg {
            transform: scale(1.5);
          }
        }
        &-count {
          color: var(--color-surface-text-primary);
          @mixin text-l 300;
        }
      }
    }
    ^&__indicators {
      padding: 16px 16px 0 0;
      display: flex;
      align-items: center;
      align-self: flex-start;
      cursor: pointer;
      @media (--mobile) {
        align-items: flex-start;
      }
      &-separator {
        display: none;
      }
      ^^&__clear-indicator {
        color: var(--color-surface-text-primary);
        padding: 0 8px 0 0;
        @mixin text-m 300;
        &::after {
          content: 'clear';
        }
      }
      ^^&__dropdown-indicator {
        width: 20px;
        height: 20px;
        background: url('/public/img/icons/chevron_xs_down.svg') 50% 50% no-repeat;
        @media (--mobile) {
          margin: 2px 0 0 0;
        }
      }
      ^^&__indicator {
        & svg {
          display: none;
        }
      }
    }
  }
  &__menu {
    width: 100%;
    background: var(--color-surface-primary);
    margin: -8px 0 0 0;
    border: solid 1px  var(--color-surface-border-primary);
    border-top: none;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 100000;
    &-notice {
      padding: 10px 48px 10px 20px;
      &--no-options {
        @mixin text-m;
      }
    }
    &-list {
      overflow-y: scroll;
      max-height: 200px;
      background: var(--color-surface-primary);
      padding: 8px 0;
      &--is-multi {
        @mixin text-m;
        ^^^&__option {
          &--is-selected {
          }
          &--is-focused {
            background: none !important;
            /* display: flex;
            justify-content: center; */
            &:hover {
              background: #eee;
              cursor: pointer;
            }
          }
          &--is-disabled {
            border: solid 1px red;
          }
        }
      }
      ^^&__option {
        color: var(--color-surface-text-primary);
        padding: 16px 48px 16px 20px;
        display: flex;
        cursor: pointer;
        @mixin text-m;
        &:hover {
          background: var(--color-surface-primary-hover);
        }
        &-label {
          width: 100%;
          position: relative;
          display: block;
          z-index: 100;
          cursor: pointer;
        }
        &-checkbox {
          opacity: 0%;
          &:checked {
            & + .form-select {
              &__option-state {
                &::before {
                  width: 8px;
                  height: 8px;
                  background: var(--color-surface-item-accent);
                  border-radius: 50%;
                  position: absolute;
                  content: '';
                  display: block;
                  left: 2px;
                  top: 2px;
                  z-index: 2;
                }
              }
            }
          }
        }
        &-state {
          width: 14px;
          height: 14px;
          background: none;
          border: solid 1px var(--color-surface-border-accent);
          border-radius: 2px;
          position: absolute;
          content: '';
          display: block;
          left: 0;
          top: 2px;
          z-index: 1;
          &:hover {
            border: solid 1px var(--color-surface-border-accent);
          }
        }
        &-text {
          padding: 0 0 0 8px;
        }
        &--is-selected {
          color: var(--color-surface-text-primary);
          background: var(--color-surface-primary-hover);
        }
        &--is-focused {
          color: var(--color-surface-text-primary);
          background: var(--color-surface-primary-hover);
        }
      }
    }
  }

  &__disabled{
    pointer-events: none;
  }
}