.simple-modal .ant-modal-footer {
  button.ant-btn {
    font-size: var(--font-size-sm);
    padding: 0 15px;
    line-height: normal;
  }
}

.ui-api-modal,
.simple-modal {
  .ant-btn-primary {
    background: var(--component-button-background);
    border-radius: var(--component-button-border-radius);
    width: var(--component-button-width);
    height: var(--component-button-height);
    font-weight: var(--component-button-font-weight);
    font-family: var(--component-button-font-family);
    color: var(--component-button-color, var(--color-background-primary));
    font-size: var(--component-button-font-size, 1rem);
    line-height: var(--component-button-line-height, 1.5rem);
    padding: var(--component-button-padding, 0 18px);

    &:hover:not(:disabled) {
      background: var(--component-button-hover-background);
      color: var(--color-background-primary);
      transition: none;
    }

    &:disabled {
      background: var(--component-button-disabled-background);
      color: var(--component-button-disabled-color);
    }

    &:focus:not(:disabled) {
      background: var(--component-button-focus-background);
      color: var(--color-background-primary);
    }

    &:active:not(:disabled) {
      background: var(--component-button-active-background);
      color: var(--color-background-primary);
    }
  }

  .ant-btn-default {
    background: var(--component-secondary-btn-background);
    border-radius: var(--component-secondary-btn-border-radius);
    border: var(--component-secondary-btn-border);
    width: var(--component-secondary-btn-width);
    height: var(--component-secondary-btn-height);
    color: var(--component-secondary-btn-color);
    font-weight: var(--component-secondary-btn-font-weight);
    font-family: var(--component-secondary-btn-font-family);

    &:hover:not(:disabled) {
      border: var(--component-secondary-btn-hover-border);
      color: var(--component-secondary-btn-hover-color);
      font-family: var(--component-secondary-btn-hover-background);
    }

    &:disabled {
      background: var(--component-secondary-btn-disabled-background);
      border: var(--component-secondary-btn-disabled-border);
      color: var(--component-secondary-btn-disabled-color);
      pointer-events: none;
    }

    &:focus:not(:disabled) {
      border: var(--component-secondary-btn-focus-border);
      color: var(--component-secondary-btn-focus-color);
      font-family: var(--component-secondary-btn-hover-background);
    }

    &:active:not(:disabled) {
      border: var(--component-secondary-btn-active-border);
      color: var(--component-secondary-btn-active-color);
      font-family: var(--component-secondary-btn-hover-background);
    }
  }
}