/**
* 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} {
  .component-css-vars-dropdown();

  display: inline-block;
  position: relative;
  color: var(--ti-dropdown-text-color);
  font-size: var(--ti-dropdown-font-size);

  span {
    display: inline-block;
  }

  & &__trigger:not(.tiny-button) {
    display: flex;
    align-items: center;

    .tiny-svg {
      margin-top: var(--ti-dropdown-trigger-svg-margin-top);
      margin-bottom: var(--ti-dropdown-trigger-svg-margin-bottom);
      vertical-align: top;
    }

    &:not(:has(.@{dropdown-prefix-cls}__title)) > .@{dropdown-prefix-cls}__suffix-inner {
      .tiny-svg {
        width: var(--ti-dropdown-trigger-only-svg-width);
        height: var(--ti-dropdown-trigger-only-svg-height);
        margin: 2px;
      }
      &:hover {
        background-color: var(--ti-dropdown-trigger-only-svg-hover-bg-color);
        border-radius: var(--ti-dropdown-trigger-only-svg-hover-radius);
      }
    }
  }

  & &__trigger {
    .@{dropdown-prefix-cls}__title {
      line-height: var(--ti-dropdown-line-height);
      margin-right: var(--ti-dropdown-trigger-title-margin-right);
    }

    .@{svg-prefix-cls} {
      fill: var(--ti-dropdown-icon-color);
      font-size: var(--ti-dropdown-icon-size);
    }

    &.@{css-prefix}button .@{svg-prefix-cls} {
      fill: var(--ti-dropdown-button-icon-color);
      font-size: var(--ti-dropdown-button-icon-size);
      margin-left: var(--ti-dropdown-trigger-svg-margin-left);
    }

    &.@{css-prefix}button--default .@{svg-prefix-cls} {
      fill: var(--ti-button-normal-text-color);
    }

    &:not(.@{dropdown-prefix-cls}__caret-button):not(.is-disabled):hover {
      color: var(--ti-dropdown-text-color-hover);

      .@{svg-prefix-cls} {
        fill: var(--ti-dropdown-icon-color-hover);
      }
    }

    &.is-disabled {
      cursor: not-allowed;
      color: var(--ti-dropdown-text-color-disabled);

      .@{svg-prefix-cls} {
        fill: var(--ti-dropdown-text-color-disabled);
      }
    }
  }

  & &__border {
    .@{dropdown-prefix-cls}__title {
      line-height: var(--ti-dropdown-line-height);
      margin-right: var(--ti-dropdown-trigger-title-margin-right);
    }
  }

  .@{css-prefix}button-group {
    display: block;

    .@{css-prefix}button {
      float: none;

      &--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}__title-button {
    padding-left: var(--ti-dropdown-title-button-padding-left);
    padding-right: var(--ti-dropdown-title-button-padding-right);

    &.is-disabled.tiny-button--default:hover {
      z-index: 0;
    }
  }

  & &__trigger.@{dropdown-prefix-cls}__caret-button {
    padding-left: var(--ti-dropdown-caret-button-padding-left);
    padding-right: var(--ti-dropdown-caret-button-padding-right);
    position: relative;
    border-left: none;
    min-width: var(--ti-dropdown-caret-button-min-width);
    line-height: 1;

    &:before {
      content: '';
      position: absolute;
      display: block;
      width: var(--ti-dropdown-caret-line-width);
      top: 0;
      bottom: 0;
      left: 0;
      margin-top: var(--ti-dropdown-caret-line-margin-top);
      margin-bottom: var(--ti-dropdown-caret-line-margin-bottom);
      background-color: var(--ti-dropdown-caret-line-bg-color);
    }

    &.@{css-prefix}button--default:before {
      background: var(--ti-dropdown-caret-line-bg-color-default);
    }

    &.@{css-prefix}button--default:hover:not(.is-disabled):before {
      background-color: var(--ti-dropdown-caret-line-bg-color-default-hover);
    }

    &:hover:not(.is-disabled):before {
      margin-top: var(--ti-dropdown-caret-line-margin-top-hover);
      margin-bottom: var(--ti-dropdown-caret-line-margin-bottom-hover);
    }

    .tiny-svg {
      padding-left: var(--ti-dropdown-caret-svg-padding-left);
      margin: var(--ti-dropdown-caret-svg-margin-vertical) var(--ti-dropdown-caret-svg-margin-horizontal);
    }
  }

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

  &:hover {
    cursor: pointer;
  }

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