@import '../index.less';

@btri-btn: ~'@{ant-prefix}-btri-btn';

.@{btri-btn} {
  &-box.@{ant-prefix}-btn {
    .i-icon {
      font-size: 16px;
    }
  }
  &-box.@{ant-prefix}-btn.@{btri-btn}-loading {
    outline: none !important;
    cursor: default !important;
  }
  &-box.@{ant-prefix}-btn-default.@{btri-btn}-disabled {
    background-color: var(--gray-1) !important;
    color: var(--disable-font) !important;
    border-color: var(--gray-blue-4) !important;
  }
  &-box.@{ant-prefix}-btn-text.@{btri-btn}-disabled {
    color: var(--disable-font);
  }
  &-box.@{ant-prefix}-btn-link.@{btri-btn}-disabled {
    color: var(--primary-3) !important;
  }

  &-box.@{ant-prefix}-btn.@{btri-btn}-error {
    background-color: var(--red-6);
    border-color: var(--red-6);
    color: var(--white);
  }
  &-box.@{ant-prefix}-btn.@{btri-btn}-error:hover {
    background-color: var(--red-7);
    border-color: var(--red-7);
    color: var(--white);
  }
  &-box.@{ant-prefix}-btn.@{btri-btn}-error:focus {
    background-color: var(--red-6);
    outline: 2px solid var(--red-2);
    color: var(--white);
  }
  &-box.@{ant-prefix}-btn.@{btri-btn}-alarm {
    background-color: var(--orange-6);
    border-color: var(--orange-6);
    color: var(--white);
  }
  &-box.@{ant-prefix}-btn.@{btri-btn}-alarm:hover {
    background-color: var(--orange-7);
    border-color: var(--orange-7);
    color: var(--white);
  }
  &-box.@{ant-prefix}-btn.@{btri-btn}-alarm:focus {
    background-color: var(--orange-6);
    outline: 2px solid var(--orange-2);
    color: var(--white);
  }
  &-box.@{ant-prefix}-btn.@{btri-btn}-success {
    background-color: var(--green-6);
    border-color: var(--green-6);
    color: var(--white);
  }
  &-box.@{ant-prefix}-btn.@{btri-btn}-success:hover {
    background-color: var(--green-7);
    border-color: var(--green-7);
    color: var(--white);
  }
  &-box.@{ant-prefix}-btn.@{btri-btn}-success:focus {
    background-color: var(--green-6);
    outline: 2px solid var(--green-2);
    color: var(--white);
  }

  &-box.@{ant-prefix}-btn.@{btri-btn}-errorLink {
    color: var(--red-7);
    transition-duration: 0;
  }
  &-box.@{ant-prefix}-btn.@{btri-btn}-errorLink:hover {
    color: var(--red-8);
  }
  &-box.@{ant-prefix}-btn.@{btri-btn}-errorLink:focus {
    color: var(--red-7);
  }
  &-box.@{ant-prefix}-btn.@{btri-btn}-alarmLink {
    color: var(--orange-7);
  }
  &-box.@{ant-prefix}-btn.@{btri-btn}-alarmLink:hover {
    color: var(--orange-8);
  }
  &-box.@{ant-prefix}-btn.@{btri-btn}-alarmLink:focus {
    color: var(--orange-7);
  }
  &-box.@{ant-prefix}-btn.@{btri-btn}-successLink {
    color: var(--green-7);
  }
  &-box.@{ant-prefix}-btn.@{btri-btn}-successLink:hover {
    color: var(--green-8);
  }
  &-box.@{ant-prefix}-btn.@{btri-btn}-successLink:focus {
    color: var(--green-7);
  }

  &-box.@{ant-prefix}-btn.@{btri-btn}-only-icon {
    padding: 0 6px;
    border: none;
    .@{ant-prefix}-btri-icon-box .i-icon {
      font-size: 20px;
    }
  }
  &-box.@{ant-prefix}-btn.@{btri-btn}-only-icon:hover {
    border: none;
  }
  &-box.@{ant-prefix}-btn-sm.@{btri-btn}-only-icon {
    padding: 0 4px;
    .@{ant-prefix}-btri-icon-box .i-icon {
      font-size: 16px;
    }
  }
  &-box.@{ant-prefix}-btn-lg.@{btri-btn}-only-icon {
    padding: 0 8px;
    .@{ant-prefix}-btri-icon-box .i-icon {
      font-size: 24px;
    }
  }
  &-box.@{ant-prefix}-btn-default.@{ant-prefix}-btn {
    color: var(--body-font);
    border-color: var(--gray-blue-6);
  }
  &-box.@{ant-prefix}-btn-default.@{ant-prefix}-btn:hover {
    color: var(--primary-6);
    border-color: var(--primary-6);
  }
  &-box.@{ant-prefix}-btn-default.@{ant-prefix}-btn:focus {
    color: var(--primary-6);
    border-color: var(--primary-6);
    outline: 2px solid var(--primary-2);
    box-shadow: none;
  }
  &-box.@{ant-prefix}-btn-secondary.@{btri-btn}-disabled {
    background-color: var(--primary-2) !important;
    color: var(--white) !important;
    border-color: var(--primary-2) !important;
  }
  &-box.@{ant-prefix}-btn-secondary.@{ant-prefix}-btn {
    background-color: var(--primary-1);
    border: 2px solid transparent;
    color: var(--primary-6);
  }
  &-box.@{ant-prefix}-btn-secondary.@{ant-prefix}-btn:hover {
    background-color: var(--primary-2);
    border: 2px solid transparent;
  }
  &-box.@{ant-prefix}-btn-secondary.@{ant-prefix}-btn:focus {
    background-color: var(--primary-1);
    border: 2px solid var(--primary-2);
  }

  &-box.@{ant-prefix}-btri-icon-box {
    font-size: 16px;
  }
  &-box.@{ant-prefix}-btn-lg .@{ant-prefix}-btri-icon-box {
    font-size: 20px;
  }
  &-box.@{ant-prefix}-btn-sm .@{ant-prefix}-btri-icon-box {
    font-size: 12px;
  }
  &-box.@{ant-prefix}-btn:not(.@{ant-prefix}-btn-icon-only):not(
      .@{ant-prefix}-btn-block
    ) {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  &-box.@{ant-prefix}-btn.@{ant-prefix}-btn-icon-only {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &-box.@{ant-prefix}-btn-primary {
    background-color: var(--primary-6);
  }
  &-box.@{ant-prefix}-btn-primary.@{btri-btn}-disabled {
    background-color: var(--primary-3) !important;
    color: var(--white) !important;
    border: none;
  }
  &-box.@{ant-prefix}-btn-primary:hover {
    background-color: var(--primary-7);
  }
  &-box.@{ant-prefix}-btn-primary:focus {
    background-color: var(--primary-6);
    outline: 2px solid var(--primary-2);
  }
  &-box.@{ant-prefix}-btn.@{ant-prefix}-btn-dashed:focus {
    border-color: var(--primary-7);
  }

  &-box.@{ant-prefix}-btn.@{ant-prefix}-primary.@{ant-prefix}-btn-dangerous:hover {
    background-color: var(--red-5);
  }
  &-box.@{ant-prefix}-btn.@{ant-prefix}-primary.@{ant-prefix}-btn-dangerous:focus {
    background-color: var(--red-7);
  }
  &-box.@{ant-prefix}-default.@{ant-prefix}-btn-dangerous:hover {
    color: var(--red-5);
    border-color: var(--red-5);
  }
  &-box.@{ant-prefix}-default.@{ant-prefix}-btn-dangerous:focus {
    color: var(--red-7);
    border-color: var(--red-7);
  }
  &-box.@{ant-prefix}-btn-text {
    border: 2px solid transparent;
    outline: 2px solid transparent;
  }
  &-box.@{ant-prefix}-btn-text:hover {
    background-color: var(--gray-blue-2);
    outline: 2px solid transparent;
  }
  &-box.@{ant-prefix}-btn-text:focus {
    background-color: var(--gray-blue-2);
    outline: 2px solid var(--gray-blue-3);
  }
  &-box.@{ant-prefix}-btn-link:hover {
    background-color: transparent;
    color: var(--primary-7);
  }
  &-box.@{ant-prefix}-btn-link:focus {
    color: var(--primary-6);
    background-color: transparent;
  }
  &-box.@{ant-prefix}-btn-text.@{ant-prefix}-btn-dangerous:hover {
    background-color: var(--gray-3);
    color: var(--red-5);
  }
  &-box.@{ant-prefix}-btn-text.@{ant-prefix}-btn-dangerous:focus {
    color: var(--red-7);
    background-color: var(--gray-4);
  }
}