@use "sass:math";

@mixin cob-button-sizing(
  $height: null,
  $line-height: null,
  $font-size: null,
  $horizontal-padding: null
) {
  $border-width: 2px;
  $vertical-padding: math.div($height - $line-height, 2) - $border-width;

  @if $font-size > $line-height {
    @error "Invalid line-height";
  }

  min-height: $height;
  min-width: $height;
  padding: $vertical-padding $horizontal-padding;

  border-width: $border-width;

  font-size: $font-size;
  line-height: $line-height;
}

.cob-Button {
  @apply c-state-interactive c-transition;
  @include cob-button-sizing(
    $height: 40px,
    $line-height: 20px,
    $font-size: 16px,
    $horizontal-padding: theme("spacing.md")
  );

  position: relative;

  display: inline-flex;

  align-items: center;
  justify-content: center;
  border-style: solid;

  text-decoration: none;
  font-family: font-family(brand);
  font-weight: 600;
  text-align: center;
  white-space: normal;

  @apply c-rounded-md;

  cursor: pointer;
  user-select: none;
  appearance: none;

  &:hover {
    text-decoration: none;

    box-shadow: 0 4px 4px 0 rgba(#000, 0.16);

    transform: translateY(-1px);
  }

  &:active {
    box-shadow: none;

    transform: none;
  }

  .cob-Button__loading-icon {
    position: absolute;

    margin: auto;
  }

  &__Icon {
    // icons are displayed in 24x24px, the following lines prevents the icon
    // from adding to the height of the button
    margin-top: -2px;
    margin-bottom: -2px;

    &--left {
      @apply c-mr-xs;
    }

    &--right {
      @apply c-ml-xs;
    }
  }

  &[aria-busy="true"] .cob-Button__content {
    color: transparent;
  }

  &[disabled],
  &[data-disabled]:not([data-disabled="false"]),
  &.cob-Button--disabled {
    @apply c-state-none c-bg-disabled c-text-onSurfaceDisabled c-border-outline;

    opacity: 1;
    cursor: not-allowed;
    box-shadow: none;

    transform: none;

    &:hover,
    &:focus,
    &:active {
      @apply c-bg-disabled c-text-onSurfaceDisabled c-border-outline;
      box-shadow: none;
    }
  }

  &--rounded {
    @apply c-rounded-full;
  }

  &--fullWidth {
    display: flex;
    max-width: 600px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  &--large {
    @include cob-button-sizing(
      $height: 56px,
      $line-height: 24px,
      $font-size: 18px,
      $horizontal-padding: theme("spacing.lg")
    );
  }
}

.cobalt-buttons-group {
  @apply c--mt-xs c-gap-x-sm;
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  &--right {
    justify-content: flex-end;
  }

  &--center {
    justify-content: center;
  }

  &__item {
    @apply c-mt-xs;

    &--fullWidth {
      flex: 1 1 auto;
    }

    // Enable fullWidth only on small screens
    &--xs\:fullWidth {
      @include breakpoint($until: xs) {
        flex: 1 1 auto;
      }
    }
  }
}

@import "./Button/index.scss";
@import "./InversedButton/index.scss";
@import "./GhostButton/index.scss";
@import "./DefaultButton/index.scss";
@import "./SmallButton/index.scss";