@use '../../_styles/mixin.scss' as *;

.o-cascader {
  height: var(--cascader-height);
}

.o-cascader-panel {
  position: relative;
  display: inline-flex;
  height: calc(var(--cascader-height) - 2 * var(--scroller-padding));
}

.o-cascader-options {
  list-style: none;
  margin: 0;
  padding: 0 calc(var(--cascader-options-gap) / 2);
  min-width: 144px;
  max-width: 269px;
  height: 100%;
  overflow-y: auto;

  & + .o-cascader-options {
    border-left: 1px solid var(--cascader-options-bd-color);
  }

  &:first-child {
    padding-left: 0;
  }

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

.o-cascader-option {
  display: flex;
  align-items: center;
  padding: var(--cascader-option-padding);
  color: var(--cascader-option-color);
  border-radius: var(--cascader-option-radius);
  background-color: var(--cascader-option-bg-color);
  transition: background-color var(--o-duration-s) var(--o-easing-standard);
  cursor: pointer;

  @include hover {
    color: var(--cascader-option-color-hover);
    background-color: var(--cascader-option-bg-color-hover);
  }
}

.o-cascader-option + .o-cascader-option {
  margin-top: var(--cascader-option-gap);
}

.o-cascader-option-label {
  font-size: var(--cascader-option-text-size);
  line-height: var(--cascader-option-text-height);
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.o-cascader-option-arrow {
  display: flex;
  align-items: center;
  font-size: var(--cascader-option-icon-size);
  margin-left: var(--cascader-option-icon-gap);
}

.o-cascader-option-selected {
  color: var(--cascader-option-color-selected);
  background-color: var(--cascader-option-bg-color-selected);
  font-weight: 500;

  @include hover {
    color: var(--cascader-option-color-selected);
    background-color: var(--cascader-option-bg-color-selected);
  }
}