.hy-button {
  height: 32px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font: inherit;
  color: inherit;
  white-space: nowrap;
  font-size: 14px;
  box-sizing: border-box;
  border-radius: 4px;
  position: relative;

  &:disabled,
  &.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
  }
  &.is-loading {
    cursor: wait;
  }
  &.hy-button--large {
    height: 40px;
  }
  &.hy-button--small {
    height: 24px;
    font-size: 12px;
    padding: 0px;
  }

  & + & {
    margin-left: 12px;
  }

  &.hy-button_default {
    background: rgba(94, 157, 180, 0.32);
    border: 1px solid rgba(94, 157, 180, 1);
    box-shadow: 0px 0px 0px 2px rgba(94, 157, 180, 0.5);
  
    .hy-button__border {
      background: linear-gradient(
        90deg,
        rgba(94, 157, 180, 0.4) 0%,
        rgba(94, 157, 180, 1) 50%,
        rgba(94, 157, 180, 0.4) 100%
      );
    }
  
    .hy-button__inner {
      background: #003a48;
      box-shadow:
        inset 0 0 5px 1px rgba(0, 138, 157, 0.5),
        inset 0 0 2px 0 rgba(0, 147, 157, 0.5);
    }
  
    .hy-button__text {
      color: #fff;
    }
  
    .hy-button__mask {
      background: radial-gradient(
        ellipse at center bottom,
        #7ebbd2 0%,
        rgb(17, 108, 114) 30%,
        transparent 60%
      );
    }
  
    &:hover .hy-button__inner {
      box-shadow:
        inset 0 0 5px 1px rgba(0, 138, 157, 0.5),
        inset 0 0 2px 0 rgba(0, 147, 157, 0.5),
        inset 0 0 5px 1px rgba(0, 138, 157, 0.5),
        inset 0 0 2px 0 rgba(0, 147, 157, 0.5);
    }
  
    &:disabled .hy-button__border,
    &.is-disabled .hy-button__border {
      background: linear-gradient(
        90deg,
        rgba(94, 157, 180, 0.18) 0%,
        rgba(94, 157, 180, 0.42) 50%,
        rgba(94, 157, 180, 0.18) 100%
      );
    }
  
    &:disabled .hy-button__inner,
    &.is-disabled .hy-button__inner {
      background: #3e5a64;
      box-shadow:
        inset 0 0 4px 1px rgba(0, 138, 157, 0.2),
        inset 0 0 2px 0 rgba(0, 147, 157, 0.16);
    }
  
    &:disabled .hy-button__text,
    &.is-disabled .hy-button__text {
      color: rgba(255, 255, 255, 0.68);
    }
  }
  
  &.hy-button_function {
    background: rgba(45, 242, 255, 0.32);
    border: 1px solid rgba(45, 242, 255, 1);
    box-shadow: 0px 0px 0px 2px rgba(45, 242, 255, 0.5);
  
    .hy-button__border {
      background: linear-gradient(
        90deg,
        rgba(45, 242, 255, 0.4) 0%,
        rgba(45, 242, 255, 1) 50%,
        rgba(45, 242, 255, 0.4) 100%
      );
    }
  
    .hy-button__inner {
      background: #003a48;
      box-shadow:
        inset 0 0 5px 1px rgba(97, 248, 255, 0.5),
        inset 0 0 2px 0 rgba(159, 248, 255, 0.5);
    }
  
    .hy-button__text {
      color: #fff;
    }
  
    .hy-button__mask {
      background: radial-gradient(
        ellipse at center bottom,
        #2df2ff 0%,
        #1798a1 30%,
        transparent 60%
      );
    }
  
    &:hover .hy-button__inner {
      box-shadow:
        inset 0 0 5px 1px rgba(97, 248, 255, 0.5),
        inset 0 0 2px 0 rgba(159, 248, 255, 0.5),
        inset 0 0 5px 1px rgba(97, 248, 255, 0.5),
        inset 0 0 2px 0 rgba(159, 248, 255, 0.5);
    }
  
    &:disabled .hy-button__border,
    &.is-disabled .hy-button__border {
      background: linear-gradient(
        90deg,
        rgba(45, 242, 255, 0.18) 0%,
        rgba(45, 242, 255, 0.42) 50%,
        rgba(45, 242, 255, 0.18) 100%
      );
    }
  
    &:disabled .hy-button__inner,
    &.is-disabled .hy-button__inner {
      background: #10575c;
      box-shadow:
        inset 0 0 4px 1px rgba(97, 248, 255, 0.2),
        inset 0 0 2px 0 rgba(159, 248, 255, 0.16);
    }
  
    &:disabled .hy-button__text,
    &.is-disabled .hy-button__text {
      color: rgba(255, 255, 255, 0.68);
    }
  }
  
  &.hy-button_addTo {
    background: rgba(44, 232, 152, 0.32);
    border: 1px solid rgba(44, 232, 152, 1);
    box-shadow: 0px 0px 0px 2px rgba(44, 232, 152, 0.5);
  
    .hy-button__border {
      background: linear-gradient(
        90deg,
        rgba(171, 255, 185, 0.4) 0%,
        rgba(171, 255, 185, 1) 50%,
        rgba(171, 255, 185, 0.4) 100%
      );
    }
  
    .hy-button__inner {
      background: #004823;
      box-shadow:
        inset 0 0 5px 1px rgba(97, 255, 179, 0.5),
        inset 0 0 2px 0 rgba(159, 255, 209, 0.5);
    }
  
    .hy-button__text {
      color: #fff;
    }
  
    .hy-button__mask {
      background: radial-gradient(
        ellipse at center bottom,
        #20e080 0%,
        #109060 30%,
        transparent 60%
      );
    }
  
    &:hover .hy-button__inner {
      box-shadow:
        inset 0 0 5px 1px rgba(97, 255, 179, 0.5),
        inset 0 0 2px 0 rgba(159, 255, 209, 0.5),
        inset 0 0 5px 1px rgba(97, 255, 179, 0.5),
        inset 0 0 2px 0 rgba(159, 255, 209, 0.5);
    }
  
    &:disabled .hy-button__border,
    &.is-disabled .hy-button__border {
      background: linear-gradient(
        90deg,
        rgba(171, 255, 185, 0.18) 0%,
        rgba(171, 255, 185, 0.42) 50%,
        rgba(171, 255, 185, 0.18) 100%
      );
    }
  
    &:disabled .hy-button__inner,
    &.is-disabled .hy-button__inner {
      background: #1d3d2d;
      box-shadow:
        inset 0 0 4px 1px rgba(97, 255, 179, 0.2),
        inset 0 0 2px 0 rgba(159, 255, 209, 0.16);
    }
  
    &:disabled .hy-button__text,
    &.is-disabled .hy-button__text {
      color: rgba(255, 255, 255, 0.68);
    }
  }
  
  &.hy-button_delete {
    background: rgba(255, 77, 77, 0.32);
    border: 1px solid rgba(255, 77, 77, 1);
    box-shadow: 0px 0px 0px 2px rgba(255, 77, 77, 0.5);
  
    .hy-button__border {
      background: linear-gradient(
        90deg,
        rgba(255, 77, 77, 0.4) 0%,
        rgba(255, 77, 77, 1) 50%,
        rgba(255, 77, 77, 0.4) 100%
      );
    }
  
    .hy-button__inner {
      background: #4f0000;
      box-shadow:
        inset 0 0 5px 1px rgba(255, 97, 97, 0.5),
        inset 0 0 2px 0 rgba(255, 159, 159, 0.5);
    }
  
    .hy-button__text {
      color: #fff;
    }
  
    .hy-button__mask {
      background: radial-gradient(
        ellipse at center bottom,
        #ff0000 0%,
        #b41414 30%,
        transparent 60%
      );
    }
  
    &:hover .hy-button__inner {
      box-shadow:
        inset 0 0 5px 1px rgba(255, 97, 97, 0.5),
        inset 0 0 2px 0 rgba(255, 159, 159, 0.5),
        inset 0 0 5px 1px rgba(255, 97, 97, 0.5),
        inset 0 0 2px 0 rgba(255, 159, 159, 0.5);
    }
  
    &:disabled .hy-button__border,
    &.is-disabled .hy-button__border {
      background: linear-gradient(
        90deg,
        rgba(255, 77, 77, 0.18) 0%,
        rgba(255, 77, 77, 0.42) 50%,
        rgba(255, 77, 77, 0.18) 100%
      );
    }
  
    &:disabled .hy-button__inner,
    &.is-disabled .hy-button__inner {
      background: #4b0c0c;
      box-shadow:
        inset 0 0 4px 1px rgba(255, 97, 97, 0.2),
        inset 0 0 2px 0 rgba(255, 159, 159, 0.16);
    }
  
    &:disabled .hy-button__text,
    &.is-disabled .hy-button__text {
      color: rgba(255, 255, 255, 0.68);
    }
  }

  &.hy-button_operate {
    background: rgba(45, 255, 211, 0.32);
    border: 1px solid rgba(45, 255, 211, 1);
    box-shadow: 0px 0px 0px 2px rgba(45, 255, 211, 0.5);
  
    .hy-button__border {
      background: linear-gradient(
        90deg,
        rgba(45, 255, 211, 0.4) 0%,
        rgba(45, 255, 211, 1) 50%,
        rgba(45, 255, 211, 0.4) 100%
      );
    }
  
    .hy-button__inner {
      background: #002932;
      box-shadow:
        inset 0 0 5px 1px rgba(45, 255, 211, 0.5),
        inset 0 0 2px 0 rgba(45, 255, 211, 0.5);
    }
  
    .hy-button__text {
      color: #fff;
    }
  
    .hy-button__mask {
      background: radial-gradient(
        ellipse at center bottom,
        #2DFFD3 0%,
        #189177 30%,
        transparent 60%
      );
    }
  
    &:hover .hy-button__inner {
      box-shadow:
        inset 0 0 5px 1px rgba(45, 255, 211, 0.5),
        inset 0 0 2px 0 rgba(45, 255, 211, 0.5),
        inset 0 0 5px 1px rgba(45, 255, 211, 0.5),
        inset 0 0 2px 0 rgba(45, 255, 211, 0.5);
    }
  
    &:disabled .hy-button__border,
    &.is-disabled .hy-button__border {
      background: linear-gradient(
        90deg,
        rgba(45, 255, 211, 0.18) 0%,
        rgba(45, 255, 211, 0.42) 50%,
        rgba(45, 255, 211, 0.18) 100%
      );
    }
  
    &:disabled .hy-button__inner,
    &.is-disabled .hy-button__inner {
      background: #4b0c0c;
      box-shadow:
        inset 0 0 4px 1px rgba(45, 255, 211, 0.2),
        inset 0 0 2px 0 rgba(24, 145, 119, 0.16);
    }
  
    &:disabled .hy-button__text,
    &.is-disabled .hy-button__text {
      color: rgba(255, 255, 255, 0.68);
    }
  }
}


.hy-button-text {
  --hy-button-text-color: rgba(var(--hy-auxiliary));
  --hy-button-font-size: 14px;
  color: var(--hy-button-text-color);
  font-size: var(--hy-button-font-size);
  text-decoration: underline;
  text-decoration-color: var(--hy-button-text-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;

  &:not(.is-disabled) {
    &:active {
      opacity: 0.8;
    }
  }

  &.hy-button--large {
    --hy-button-font-size: 14px;
    // padding: 10px 19px 9px;
  }

  &.hy-button--default {
    // padding: 6px 15px 5px;
  }

  &.hy-button--small {
    --hy-button-font-size: 12px;
    // padding: 4px 11px;
  }

  &.hy-button_default {
    --hy-button-text-color: rgba(var(--hy-auxiliary));
  }

  &.hy-button_function {
    --hy-button-text-color: rgba(var(--hy-theme));
  }

  &.hy-button_addTo {
    --hy-button-text-color: rgba(var(--hy-success));
  }

  &.hy-button_delete {
    --hy-button-text-color: rgba(var(--hy-danger-2));
  }

  &.hy-button_operate {
    --hy-button-text-color: rgba(var(--hy-success-3));
  }

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