.o-btn {
  --btn-color: var(--o-color-info2);
  --btn-color-hover: var(--o-color-control2);
  --btn-color-active: var(--o-color-control3);

  --btn-bd-color: var(--o-color-control1);
  --btn-bd-color-hover: var(--o-color-control2);
  --btn-bd-color-active: var(--o-color-control3);
  --btn-bd-color-disabled: var(--o-color-control1);

  &.o-btn-solid {
    --btn-color: var(--o-color-white);
    --btn-color-hover: var(--o-color-white);
    --btn-color-active: var(--o-color-white);
    --btn-color-disabled: var(--o-color-white);

    --btn-bg-color: var(--o-color-control1-light);
    --btn-bg-color-hover: var(--o-color-control2-light);
    --btn-bg-color-active: var(--o-color-control3-light);
    --btn-bd-color-disabled: var(--o-color-control4-light);

    --btn-bd-color: var(--o-color-control1-light);
    --btn-bd-color-hover: var(--o-color-control2-light);
    --btn-bd-color-active: var(--o-color-control3-light);
    --btn-bg-color-disabled: var(--o-color-control4-light);
  }

  &.o-btn-text {
    --btn-color-hover: var(--o-color-primary2);
    --btn-color-active: var(--o-color-primary3);
    --btn-color-disabled: var(--o-color-info4);
  }
}
.o-btn-normal {
  --btn-color-disabled: var(--o-color-info4);
  &.o-btn-icon-only {
    --btn-color-hover: var(--o-color-primary2);
    --btn-bd-color-hover: var(--o-color-primary2);
  }
  &.o-btn-solid {
    --btn-color: var(--o-color-info2);
    --btn-color-hover: var(--o-color-info2);
    --btn-color-active: var(--o-color-info2);
    --btn-color-disabled: var(--o-color-info4);
  }
}
.o-btn-primary {
  --btn-color: var(--o-color-primary1);
  --btn-color-hover: var(--o-color-primary2);
  --btn-color-active: var(--o-color-primary3);
  --btn-color-disabled: var(--o-color-primary4);

  --btn-bd-color: var(--o-color-primary1);
  --btn-bd-color-hover: var(--o-color-primary2);
  --btn-bd-color-active: var(--o-color-primary3);
  --btn-bd-color-disabled: var(--o-color-primary4);

  &.o-btn-solid {
    --btn-bg-color: var(--o-color-primary1);
    --btn-bg-color-hover: var(--o-color-primary2);
    --btn-bg-color-active: var(--o-color-primary3);
    --btn-bg-color-disabled: var(--o-color-primary4);

    --btn-bd-color: var(--o-color-primary1);
    --btn-bd-color-hover: var(--o-color-primary2);
    --btn-bd-color-active: var(--o-color-primary3);
    --btn-bd-color-disabled: var(--o-color-primary4);
  }

  &.o-btn-text {
    --btn-color: var(--o-color-info1);
  }
}
.o-btn-success {
  --btn-color: var(--o-color-success1);
  --btn-color-hover: var(--o-color-success2);
  --btn-color-active: var(--o-color-success3);
  --btn-color-disabled: var(--o-color-success4);

  --btn-bd-color: var(--o-color-success1);
  --btn-bd-color-hover: var(--o-color-success2);
  --btn-bd-color-active: var(--o-color-success3);
  --btn-bd-color-disabled: var(--o-color-success4);

  &.o-btn-solid {
    --btn-bg-color: var(--o-color-success1);
    --btn-bg-color-hover: var(--o-color-success2);
    --btn-bg-color-active: var(--o-color-success3);
    --btn-bg-color-disabled: var(--o-color-success4);

    --btn-bd-color: var(--o-color-success1);
    --btn-bd-color-hover: var(--o-color-success2);
    --btn-bd-color-active: var(--o-color-success3);
  }
}
.o-btn-warning {
  --btn-color: var(--o-color-warning1);
  --btn-color-hover: var(--o-color-warning2);
  --btn-color-active: var(--o-color-warning3);
  --btn-color-disabled: var(--o-color-warning4);

  --btn-bd-color: var(--o-color-warning1);
  --btn-bd-color-hover: var(--o-color-warning2);
  --btn-bd-color-active: var(--o-color-warning3);
  --btn-bd-color-disabled: var(--o-color-warning4);

  &.o-btn-solid {
    --btn-bg-color: var(--o-color-warning1);
    --btn-bg-color-hover: var(--o-color-warning2);
    --btn-bg-color-active: var(--o-color-warning3);
    --btn-bg-color-disabled: var(--o-color-warning4);

    --btn-bd-color: var(--o-color-warning1);
    --btn-bd-color-hover: var(--o-color-warning2);
    --btn-bd-color-active: var(--o-color-warning3);
  }

  &.o-btn-disabled {
    --btn-color: var(--o-color-warning4);
    --btn-bg-color: var(--o-color-warning4);
    --btn-bd-color: var(--o-color-warning4);
  }
}
.o-btn-danger {
  --btn-color: var(--o-color-danger1);
  --btn-color-hover: var(--o-color-danger2);
  --btn-color-active: var(--o-color-danger3);
  --btn-color-disabled: var(--o-color-danger4);

  --btn-bd-color: var(--o-color-danger1);
  --btn-bd-color-hover: var(--o-color-danger2);
  --btn-bd-color-active: var(--o-color-danger3);
  --btn-bd-color-disabled: var(--o-color-danger4);

  &.o-btn-solid {
    --btn-bg-color: var(--o-color-danger1);
    --btn-bg-color-hover: var(--o-color-danger2);
    --btn-bg-color-active: var(--o-color-danger3);
    --btn-bg-color-disabled: var(--o-color-danger4);

    --btn-bd-color: var(--o-color-danger1);
    --btn-bd-color-hover: var(--o-color-danger2);
    --btn-bd-color-active: var(--o-color-danger3);
  }
}

.o-btn-brand {
  &.o-btn-solid {
    --btn-bg-image: linear-gradient(var(--o-color-primary1));
    --btn-bg-image-hover: linear-gradient(var(--o-color-primary2));
    --btn-bg-image-active: linear-gradient(var(--o-color-primary3));
    --btn-bg-image-disabled: linear-gradient(var(--o-color-primary4));
  }
}

.o-btn-small {
  --btn-radius: var(--o-radius_control-xs);
  --btn-gap: 4px;
  --btn-gap-prefix: var(--btn-gap);
  --btn-gap-suffix: var(--btn-gap);
  --btn-padding: 0 15px;
  --btn-icon-size: var(--o-icon_size-xs);
  --btn-height: 28px;
}
.o-btn-medium {
  --btn-min-width: 80px;

  --btn-radius: var(--o-radius_control-s);
  --btn-gap: 8px;
  --btn-gap-prefix: var(--btn-gap);
  --btn-gap-suffix: var(--btn-gap);
  --btn-padding: 0 15px;
  --btn-icon-size: var(--o-icon_size-xs);
  --btn-height: var(--o-control_size-m);
}
.o-btn-large {
  --btn-min-width: 96px;

  --btn-radius: var(--o-radius_control-s);
  --btn-gap: 8px;
  --btn-gap-prefix: var(--btn-gap);
  --btn-gap-suffix: var(--btn-gap);
  --btn-padding: 0 23px;
  --btn-icon-size: var(--o-icon_size-m);
  --btn-height: var(--o-control_size-l);
}

.o-btn-round-pill {
  --btn-radius: var(--o-control_size-l);
}

.o-btn-text {
  --btn-bd-color-disabled: transparent;
}

.o-btn-text.o-btn-large {
  --btn-gap-prefix: 8px;
  --btn-gap-suffix: 4px;
}

.o-btn-text.o-btn-medium {
  --btn-gap-prefix: 8px;
  --btn-gap-suffix: 4px;
}

.o-btn-text.o-btn-small {
  --btn-gap-prefix: 8px;
  --btn-gap-suffix: 4px;
}

.o-btn-icon-only {
  --btn-padding: 0;
  --btn-max-width: none;
  --btn-min-width: none;
  &.o-btn-text {
    --btn-color-hover: var(--o-color-primary2);
    --btn-color-active: var(--o-color-primary3);
    --btn-bg-color-hover: var(--o-color-control2-light);
    --btn-bg-color-active: var(--o-color-control3-light);
  }
}