@use "../../style/variables" as *;

.#{$prefix}-cascader {
  position: relative;
  display: inline-block;
  width: 100%;
  min-width: 0;

  &_disabled {
    opacity: var(--ty-cascader-opacity-disabled);
    pointer-events: none;
  }

  &_sm &__selector {
    height: var(--ty-cascader-height-sm, var(--ty-control-height-sm, var(--ty-height-sm)));
    font-size: var(--ty-cascader-font-size-sm, var(--ty-control-font-size-sm, var(--ty-font-size-sm)));
    padding: var(--ty-cascader-padding-sm, 0 calc(var(--ty-control-padding-inline-sm, 8px) + 20px) 0 var(--ty-control-padding-inline-sm, 8px));
  }

  &_md &__selector {
    height: var(--ty-cascader-height-md, var(--ty-control-height-md, var(--ty-height-md)));
    font-size: var(--ty-cascader-font-size-md, var(--ty-control-font-size-md, var(--ty-font-size-base)));
    padding: var(--ty-cascader-padding-md, 0 calc(var(--ty-control-padding-inline-md, 12px) + 20px) 0 var(--ty-control-padding-inline-md, 12px));
  }

  &_lg &__selector {
    height: var(--ty-cascader-height-lg, var(--ty-control-height-lg, var(--ty-height-lg)));
    font-size: var(--ty-cascader-font-size-lg, var(--ty-control-font-size-lg, var(--ty-font-size-lg)));
    padding: var(--ty-cascader-padding-lg, 0 calc(var(--ty-control-padding-inline-lg, 16px) + 20px) 0 var(--ty-control-padding-inline-lg, 16px));
  }

  &__selector {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--ty-cascader-border);
    border-radius: var(--ty-cascader-radius);
    background: var(--ty-cascader-bg);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;

    &:hover {
      border-color: var(--ty-cascader-border-hover);
    }
  }

  &_open &__selector {
    border-color: var(--ty-cascader-border-focus);
    box-shadow: var(--ty-cascader-shadow-focus);
  }

  &__display {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ty-cascader-color);
  }

  &__placeholder {
    color: var(--ty-cascader-placeholder);
  }

  &__clear {
    position: absolute;
    right: var(--ty-cascader-arrow-offset-inline-end);
    top: 50%;
    transform: translateY(-50%);
    width: var(--ty-cascader-clear-size, 14px);
    height: var(--ty-cascader-clear-size, 14px);
    font-size: var(--ty-cascader-clear-font-size);
    color: var(--ty-cascader-clear-color);
    cursor: pointer;
    display: none;
    border: 0;
    padding: 0;
    background: transparent;
    line-height: 1;
    align-items: center;
    justify-content: center;
    z-index: 1;

    &:hover {
      color: var(--ty-cascader-clear-color-hover);
    }
  }

  &_has-value:hover &__clear {
    display: inline-flex;
  }

  &__arrow {
    position: absolute;
    right: var(--ty-cascader-arrow-offset-inline-end);
    font-size: var(--ty-cascader-arrow-font-size);
    color: var(--ty-cascader-arrow-color);
    transition: transform 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  &_has-value:hover &__arrow {
    opacity: 0;
  }

  &_open &__arrow {
    transform: rotate(180deg);
  }

  &__dropdown {
    background: var(--ty-cascader-dropdown-bg);
    border-radius: var(--ty-cascader-radius);
    box-shadow: var(--ty-cascader-dropdown-shadow);
    font-size: var(--ty-cascader-font-size-md);
  }

  &__menus {
    display: flex;
  }

  &__menu {
    list-style: none;
    margin: 0;
    padding: var(--ty-cascader-menu-padding);
    min-width: var(--ty-cascader-menu-min-width);
    max-height: var(--ty-cascader-dropdown-max-height);
    overflow-y: auto;

    &:not(:last-child) {
      border-right: 1px solid var(--ty-cascader-border);
    }
  }

  &__menu-empty {
    padding: var(--ty-cascader-menu-empty-padding);
    color: var(--ty-cascader-menu-empty-color);
    text-align: center;
  }

  &__menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ty-cascader-menu-item-padding);
    cursor: pointer;
    transition: background 0.15s;

    &:hover:not(&_disabled) {
      background: var(--ty-cascader-hover);
    }

    &_active {
      color: var(--ty-cascader-option-color-active);
      font-weight: var(--ty-cascader-option-font-weight-active);
      background: var(--ty-cascader-selected-bg);
    }

    &_disabled {
      cursor: not-allowed;
      opacity: var(--ty-cascader-menu-item-disabled-opacity);
    }
  }

  &__menu-item-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__menu-item-arrow {
    margin-left: var(--ty-cascader-menu-item-arrow-gap);
    font-size: var(--ty-cascader-menu-item-arrow-font-size);
    color: var(--ty-cascader-menu-item-arrow-color);
  }
}