.action-button {
  &.is-disabled {
    color: #BDBDBD!important;
    background-color: #f6f9fb!important;
    border: 1px solid #E7E7E7!important;
  }
  &.is-disabled.is-loading {
    color: #BDBDBD!important;
  }
  &.lg {
    --button-height: calc(var(--xs) * 6);
    --button-padding-x: calc(var(--xs) * 2);
    --form-icon-size: var(--xl);
  }
  &.md {
    --button-height: calc(var(--xs) * 4);
    --button-padding-x: calc(var(--xs) * 1);
    --form-icon-size: var(--md);
  }
  &.main {
    background: var(--main-button-bg-color);
    --button-font-color: #fff;
    border: var(--main-button-border-color);
    &:hover {
      background: var(--main-button-bg-color-hover);
    }
    &.is-loading {
      color: #fff!important;
    }
    &.is-disabled.is-loading {
      color: #fff!important;
    }
  }
  &.secondary {
    --button-bg-color: #EBF9FF;
    --button-font-color: #36A4FF;
    --button-border-color: #EBF9FF;
    --button-bg-color-hover: #74b3f8;
    --button-font-color-hover: #fff;
    --button-border-color-hover: #74b3f8;
    &.is-loading {
      color: #36A4FF!important;
    }
    &.is-disabled.is-loading {
      color: #BDBDBD!important;
    }
  }
}