@use '@style/theme/index.scss' as theme;
@use '@style/theme/index.scss' as global;
@use 'sass:string';
@use '@components/link/style/token.scss' as *;

$link-prefix-cls: string.unquote('#{theme.$prefix}-link');

.#{$link-prefix-cls} {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: $link-padding-vertical $link-padding-horizontal;
  color: $link-color-text;
  font-size: $link-font-size;
  line-height: $link-line-height;
  text-decoration: none;
  background-color: global.$color-transparent;
  border-radius: $link-border-radius;
  cursor: pointer;
  transition:
    color theme.$transition-duration-1 theme.$transition-timing-function-standard,
    background-color theme.$transition-duration-1 theme.$transition-timing-function-standard;

  &:hover {
    color: $link-color-text_hover;
    background-color: $link-color-bg_hover;
  }

  &:active {
    color: $link-color-text_active;
    background-color: $link-color-bg_active;
    transition: none;
  }

  &#{&}-hoverless {
    display: inline;
    padding: 0;
    background-color: unset;

    &:active,
    &:hover {
      background-color: unset;
    }
  }

  &#{&}-disabled {
    color: $link-color-text_disabled;
    background: none;
    cursor: not-allowed;
  }

  &#{&}-loading {
    color: $link-color-text_loading;
    background: none;
    cursor: default;
  }

  // 不同状态
  &-status-success {
    color: $link-color-text_success;

    &:hover {
      color: $link-color-text_success_hover;
    }

    &:active {
      color: $link-color-text_success_active;
    }
  }

  &-status-success#{&}-disabled {
    color: $link-color-text_success_disabled;
  }

  &-status-success#{&}-loading {
    color: $link-color-text_success_loading;
  }

  &-status-danger {
    color: $link-color-text_error;

    &:hover {
      color: $link-color-text_error_hover;
    }

    &:active {
      color: $link-color-text_error_active;
    }
  }

  &-status-danger#{&}-disabled {
    color: $link-color-text_error_disabled;
  }

  &-status-danger#{&}-loading {
    color: $link-color-text_error_loading;
  }

  &-status-warning {
    color: $link-color-text_warning;

    &:hover {
      color: $link-color-text_warning_hover;
    }

    &:active {
      color: $link-color-text_warning_active;
    }
  }

  &-status-warning#{&}-disabled {
    color: $link-color-text_warning_disabled;
  }

  &-status-warning#{&}-loading {
    color: $link-color-text_warning_loading;
  }

  // 链接图标
  &-icon {
    margin-right: $link-margin-icon-right;
    font-size: $link-size-icon;
    vertical-align: middle;
  }

  &-content {
    min-width: 0;
  }

  &#{&}-icon-only {
    .#{$link-prefix-cls}-icon {
      margin-right: 0;
    }
  }
}