/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

@import '../custom.less';
@import './vars.less';

@dropdown-prefix-cls: ~'@{css-prefix}dropdown';
@svg-prefix-cls: ~'@{css-prefix}svg';
@button-prefix-cls: ~'@{css-prefix}button';

.@{dropdown-prefix-cls} {
  .inject-Dropdown-vars();

  display: inline-block;
  position: relative;
  color: var(--tv-Dropdown-text-color-link);
  font-size: var(--tv-Dropdown-font-size);
  line-height: var(--tv-Dropdown-line-height);

  &__trigger {
    display: inline-flex;
    align-items: center;

    .tiny-dropdown__prefix-inner {
      display: inline-flex;
      align-items: center;
      margin-right: var(--tv-Dropdown-icon-margin-x);
    }

    .tiny-dropdown__suffix-inner {
      display: inline-flex;
      align-items: center;
      margin-left: var(--tv-Dropdown-icon-margin-x);

      .@{svg-prefix-cls} {
        font-size: var(--tv-Dropdown-icon-size);
      }
    }

    &:not(.tiny-button) {
      .@{svg-prefix-cls} {
        fill: var(--tv-Dropdown-icon-color-link);
      }
    }

    &.@{css-prefix}button--default {
      .@{svg-prefix-cls} {
        fill: var(--tv-Dropdown-icon-color);
      }
    }
  }

  /* 纯图标按钮 */
  &__trigger:not(.tiny-button) {
    &:not(:has(.@{dropdown-prefix-cls}__title)) > .@{dropdown-prefix-cls}__suffix-inner {
      .tiny-svg {
        font-size: var(--tv-Dropdown-icon-size-only-svg);
      }

      &:hover {
        background-color: var(--tv-Dropdown-bg-color-only-svg-hover);
        border-radius: var(--tv-Dropdown-border-radius-only-svg-hover);
      }
    }
  }

  /* 按钮组 */
  .@{css-prefix}button-group {
    display: inline-flex;

    .@{dropdown-prefix-cls}__title-button {
      padding: var(--tv-Dropdown-title-button-padding);
      border-right: none;
      border-radius: var(--tv-Dropdown-title-button-border-radius);
      min-width: auto;
    }

    .@{dropdown-prefix-cls}__caret-button {
      padding-left: var(--tv-Dropdown-caret-button-padding-left);
      position: relative;
      border-left: none;
      min-width: 24px;
      border-radius: var(--tv-Dropdown-caret-button-border-radius);
      margin-left: 0;
    }

    .@{css-prefix}button {
      &--medium {
        & + .@{css-prefix}button.@{css-prefix}button--medium {
          margin-left: 0;
        }
      }

      &--small {
        & + .@{css-prefix}button.@{css-prefix}button--small {
          margin-left: 0;
        }
      }
    }
  }

  .@{dropdown-prefix-cls}-selfdefine:focus:active,
  .@{dropdown-prefix-cls}-selfdefine:focus:not(.focusing) {
    outline-width: 0;
  }

  /* 悬浮态 */
  &:hover {
    cursor: pointer;
  }

  &__trigger:hover {
    &.@{css-prefix}button {
      &.tiny-button--default:not(.is-disabled) {
        .tiny-svg {
          fill: var(--tv-Dropdown-icon-color-hover);
        }
      }
    }
  }

  /* 禁用态 */
  & .is-disabled {
    cursor: not-allowed;
    color: var(--tv-Dropdown-text-color-disabled);

    .@{svg-prefix-cls} {
      fill: var(--tv-Dropdown-icon-color-disabled);
    }
  }

  /* 下拉图标旋转 */
  &--visible {
    transform: scaleY(-1); // rotate(180deg) 会受svg的margin影响，位置会变动！
    transform-origin: center;
  }
}