@use '../style/base' as *;

@include bem(cascader) {
  @include b() {
    @include universal;
  }

  @include e(container) {
    @include universal;
    overflow: hidden;
  }

  @include e(wrapper) {
    @include universal;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    transition: transform var(--sar-cascader-wrapper-duration);
  }

  @include e(pane) {
    @include universal;
    width: 100%;
    flex: none;
  }

  @include e(options) {
    @include universal;
    flex-direction: row;
    height: var(--sar-cascader-options-height);
  }

  @include e(scroll) {
    width: 100%;
    height: 100%;
  }

  @include e(option) {
    @include universal;
    flex-direction: row;
    padding: var(--sar-cascader-option-padding-y)
      var(--sar-cascader-option-padding-x);
    cursor: pointer;

    @include m(selected) {
      color: var(--sar-cascader-selected-color);
      font-weight: var(--sar-font-bold);

      @include e(option-icon) {
        display: flex;
      }
    }

    @include m(disabled) {
      @include disabled-text;
    }

    @include m-not(disabled) {
      &:active {
        background: var(--sar-cascader-option-active-bg);
      }
    }
  }

  @include e(selection) {
    @include universal;
    justify-content: center;
    margin: calc(var(--sar-cascader-option-padding-y) * -1) 0
      calc(var(--sar-cascader-option-padding-y) * -1)
      calc(var(--sar-cascader-selection-padding-x) * -1);
    padding: var(--sar-cascader-option-padding-y)
      var(--sar-cascader-selection-padding-x);
    font-weight: normal;
    cursor: pointer;

    @include m(disabled) {
      cursor: not-allowed;
    }
  }

  @include e(option-loading) {
    display: none;
    margin-right: var(--sar-cascader-option-loading-margin-right);
    font-size: var(--sar-cascader-option-loading-size);
    color: var(--sar-cascader-option-loading-color);

    @include m(show) {
      display: inline-flex;
    }
  }

  @include e(option-label) {
    font-size: var(--sar-cascader-option-font-size);
    line-height: var(--sar-cascader-option-line-height);
  }

  @include e(option-icon) {
    display: none;
    justify-content: start;
    align-items: center;
    margin-left: auto;
  }

  @include e(load-status-wrapper) {
    @include universal;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity var(--sar-cascader-load-status-wrapper-duration);
    pointer-events: none;

    @include m(show) {
      opacity: 1;
      pointer-events: auto;
    }
  }

  @include e(load-status) {
    font-size: var(--sar-cascader-load-status-size);
    color: var(--sar-cascader-load-status-color);
  }

  @include e(error, empty) {
    cursor: pointer;
  }

  @include e(loading) {
    font-size: var(--sar-cascader-loading-size);
  }
}