@import './var.less';

.@{rv-prefix}-mobile-select {
  width: 100%;

  &__trigger {
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 0 @mobile-select-padding;
    border: 1px solid var(--rv-border-color, #ebedf0);
    border-radius: 2px;
    background-color: #fff;
    color: var(--rv-text-color, #323233);
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;

    &:focus-visible {
      outline: none;
      border-color: var(--rv-blue, #1989fa);
      box-shadow: 0 0 0 2px rgba(25, 137, 250, 0.15);
    }

    &--placeholder {
      color: var(--rv-gray-5, #c8c9cc);
    }

    &--disabled {
      cursor: not-allowed;
      color: var(--rv-gray-5, #c8c9cc);
      background-color: var(--rv-gray-2, #f7f8fa);
    }
  }

  &__placeholder {
    color: var(--rv-gray-5, #c8c9cc);
  }

  &__value-text {
    color: var(--rv-text-color, #323233);
  }

  &__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  &__tag {
    padding: 2px 6px;
    border-radius: 2px;
    background-color: var(--rv-gray-2, #f7f8fa);
    font-size: 12px;
    line-height: 1.4;
    color: var(--rv-text-color, #323233);
  }

  &__popup {
    padding-bottom: var(--rv-padding-md);
  }

  &__popup-header {
    padding: var(--rv-cell-vertical-padding) var(--rv-cell-horizontal-padding);
    font-size: 16px;
    font-weight: 500;
    color: var(--rv-text-color, #323233);
  }

  &__popup-body {
    display: flex;
    flex-direction: column;
    max-height: 50vh;
    padding: 0;
  }

  &__popup-footer {
    padding: var(--rv-cell-vertical-padding) var(--rv-cell-horizontal-padding);
  }

  &__list {
    flex: 1;
    overflow-y: auto;
    // Remove max-height as the container now controls the height
  }

  &__option {
    &--selected {
      .@{rv-prefix}-cell__title {
        color: var(--rv-blue, #1989fa);
      }
    }
  }

  &__marker {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__empty {
    padding: var(--rv-padding-lg);
    text-align: center;
    color: var(--rv-gray-5, #c8c9cc);
    font-size: 14px;
  }
}