/**
* 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 '../mixins/link.less';
@import '../custom.less';
@import './vars.less';

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

.@{link-prefix-cls} {
  .component-css-vars-link();

  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  position: relative;
  text-decoration: none;
  outline: 0;
  cursor: pointer;
  padding: 0;
  font-size: var(--ti-link-font-size);
  font-weight: var(--ti-link-font-weight);

  & .@{svg-cls} {
    width: var(--ti-link-svg-width);
    height: var(--ti-link-svg-height);
    margin-right: 0;
    margin-left: var(--ti-link-svg-margin-right);
  }

  & .@{link-svg-prefix-cls} {
    margin-right: var(--ti-link-svg-margin-right);
    margin-left: 0;
  }

  & .@{link-prefix-cls}__inner .@{svg-cls} {
    margin-right: 0;
    margin-left: var(--ti-link-svg-margin-right);
  }

  &&--additional {

    &:hover {
      color: var(--ti-link-default-hover-text-color);
      fill: var(--ti-link-default-hover-text-color);
    }

    &.is-disabled {
      &:hover {
        color: var(--ti-link-default-disabled-text-color);
        fill: var(--ti-link-default-disabled-text-color);
      }
    }

  

    &:has(.@{svg-cls}):hover {
      font-weight: var(--ti-link-icon-hover-text-weight);
      color: var(--ti-link-has-svg-hover-text-color);
      fill: var(--ti-link-has-svg-hover-text-color);
    }

    &:has(.@{svg-cls}).is-disabled {
      &:hover {
        font-weight: var(--ti-common-font-weight-4);
        color: var(--ti-link-default-disabled-text-color);
        fill: var(--ti-link-default-disabled-text-color);
      }
    }

  }

  &.is-underline:hover {
    &:after {
      content: '';
      width: var(--ti-link-only-text-underline-width);
      position: absolute;
      left: 0;
      height: 0;
      bottom: 0;
      display: block;
      border-bottom: 1px solid var(--ti-link-border-color);
    }

    &:has(.@{svg-cls}):after {
      width: var(--ti-link-has-icon-underline-width);
    }

    &:has(>:first-child:not(.@{link-prefix-cls}__inner)):after {
      left: calc(100% - var(--ti-link-has-icon-underline-width));
    }
  }

  &.is-disabled {
    cursor: not-allowed;
  }

  &&--default {
    .link-type(
      var(--ti-link-default-text-color),
      var(--ti-link-default-border-color),
      var(--ti-link-default-hover-text-color),
      var(--ti-link-default-disabled-text-color)
      )

  }


  &&--primary {
    .link-type(
      var(--ti-link-primary-text-color),
      var(--ti-link-primary-border-color),
      var(--ti-link-primary-hover-text-color),
      var(--ti-link-primary-disabled-text-color)
      )
  }

  &&--danger {
    .link-type(
      var(--ti-link-danger-text-color),
      var(--ti-link-danger-border-color),
      var(--ti-link-danger-hover-text-color),
      var(--ti-link-danger-disabled-text-color)
      )
  }

  &&--success {
    .link-type(
      var(--ti-link-success-text-color),
      var(--ti-link-success-border-color),
      var(--ti-link-success-hover-text-color),
      var(--ti-link-success-disabled-text-color)
      )
  }

  &&--warning {
    .link-type(
      var(--ti-link-warning-text-color),
      var(--ti-link-warning-border-color),
      var(--ti-link-warning-hover-text-color),
      var(--ti-link-warning-disabled-text-color)
      )
  }

  &&--info {
    .link-type(
      var(--ti-link-info-text-color),
      var(--ti-link-info-border-color),
      var(--ti-link-info-hover-text-color),
      var(--ti-link-info-disabled-text-color)
      )
  }
}