.cobalt-button {
  @apply c-state-interactive c-transition c-px-[20px] c-border c-border-outline c-rounded-lg c-bg-surface c-text-primary c-text-body-md c-font-bold c-gap-2xs hover:c-drop-shadow-lg;
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;

  text-align: center;
  text-decoration: none;
  vertical-align: middle;

  cursor: pointer;

  transform: scale(1);
  user-select: none;
  background-clip: border-box;
  appearance: none;

  &:active:not([disabled]) {
    transform: scale(0.97);
  }

  .cobalt-Icon {
    width: 24px;
    height: 24px;

    margin: initial;

    flex-shrink: 0;
  }

  &[href][aria-disabled="true"] {
    pointer-events: none;
  }

  &[disabled]:not([aria-busy="true"]),
  &[href][aria-disabled="true"]:not([aria-busy="true"]) {
    @apply c-state-none c-text-onSurfaceDisabled c-drop-shadow-none hover:c-no-underline;
    opacity: 1;
    cursor: not-allowed;

    &:not(.cobalt-button--text) {
      @apply c-bg-disabled c-border-transparent;
    }
  }

  &[aria-busy="true"]:not(.cobalt-button--text) {
    @apply c-state-none c-drop-shadow-none hover:c-no-underline;
    --c-state-interactive-color: var(--c-press);

    &:focus,
    &:hover,
    &:active {
      --c-state-interactive-color: var(--c-press);

      transform: scale(1);
    }
  }

  .cobalt-button__loading-icon {
    @apply c-text-onSurface;
    position: absolute;

    display: none;

    margin: auto;
  }

  &[aria-busy="true"] {
    color: transparent !important;

    cursor: progress;
  }

  &[aria-busy="true"] > .cobalt-button__loading-icon {
    display: inline-block;
  }
}

.cobalt-button--large {
  @apply c-px-md;
  min-height: 48px;
  min-width: 48px;
}

.cobalt-button--small {
  @apply c-px-[12px] c-border-outline hover:c-drop-shadow-md;
  min-width: 32px;
  min-height: 32px;

  font-size: 14px;

  .cobalt-Icon {
    width: 20px;
    height: 20px;
  }

  &.cobalt-button--warning {
    @apply c-bg-warning c-border-transparent c-text-onWarning;

    .cobalt-button__loading-icon {
      @apply c-text-onWarning;
    }
  }

  &.cobalt-button--tertiary {
    @apply c-bg-tertiary c-border-transparent c-text-onTertiary;

    .cobalt-button__loading-icon {
      @apply c-text-onTertiary;
    }
  }

  &.cobalt-button--secondary {
    @apply c-bg-secondary c-border-transparent c-text-onSecondary;

    .cobalt-button__loading-icon {
      @apply c-text-onSecondary;
    }
  }

  &.cobalt-button--business {
    @apply c-bg-businessContainer c-border-transparent c-text-onBusinessContainer;

    .cobalt-button__loading-icon {
      @apply c-text-onBusinessContainer;
    }
  }

  &.cobalt-button--success {
    @apply c-bg-success c-border-transparent c-text-onSuccess;

    .cobalt-button__loading-icon {
      @apply c-text-onSuccess;
    }
  }

  &.cobalt-button--neutral {
    @apply c-bg-neutral c-border-transparent c-text-onNeutral;

    .cobalt-button__loading-icon {
      @apply c-text-onNeutral;
    }
  }
}

.cobalt-button--primary {
  @apply c-bg-primary c-border-transparent c-text-onPrimary;

  .cobalt-button__loading-icon {
    @apply c-text-onPrimary;
  }

  &.cobalt-button--destructive {
    @apply c-bg-error c-border-error c-text-onError;

    .cobalt-button__loading-icon {
      @apply c-text-onError;
    }
  }
}

.cobalt-button--text {
  @apply c-state-none c-transform-none hover:c-underline c-px-none c-bg-transparent c-border-transparent c-text-current c-gap-none;
  transition: text-underline-offset 0.25s ease;

  text-underline-offset: 2px;

  &:active {
    text-underline-offset: 1px;
  }

  &:not(.cobalt-button--icon-only) {
    @apply c-drop-shadow-none;
  }

  &.cobalt-button--icon-only:not([aria-busy="true"]):not([disabled]) {
    @apply c-state-interactive;
  }
}

.cobalt-button--icon-only {
  @apply c-p-none c-rounded-full;
}

.cobalt-button--destructive {
  @apply c-text-error;
}

.cobalt-button--selected {
  @apply c-bg-primaryContainer c-text-onPrimaryContainer c-border-onPrimaryContainer;
}