.mykn-button {
  $self: &;

  --mykn-button-color-background: var(--button-primary-default-background);
  --mykn-button-color-border: var(--button-primary-default-border);
  --mykn-button-color-text: var(--button-primary-default-text);
  --mykn-button-color-shadow: var(--button-primray-default-shadow);

  --mykn-button-font-size: var(--typography-font-size-body-s);
  --mykn-button-font-weight: var(--typography-font-weight-normal);
  --mykn-button-line-height: var(--typography-line-height-body-s);
  --mykn-button-height: auto;
  --mykn-button-min-width: 88px;
  --mykn-button-width: auto;
  --mykn-button-offset: 0px;

  --mykn-button-padding-v: 0;
  --mykn-button-padding-h: 0;

  align-items: center;
  appearance: none;
  margin: 0;
  padding-block: var(--mykn-button-padding-v);
  padding-inline: var(--mykn-button-padding-h);
  background-color: var(--mykn-button-color-background);
  border: 1px solid var(--mykn-button-color-border, transparent);
  border-radius: var(--sizes-border-radius-s);
  box-shadow: 0 calc(var(--mykn-button-offset) * -1)
    var(--mykn-button-color-shadow);
  box-sizing: border-box;
  color: var(--mykn-button-color-text);
  cursor: pointer;
  gap: 0.5em;
  height: var(--mykn-button-height);
  font-family: var(--typography-font-family-body), serif;
  font-size: var(--mykn-button-font-size);
  font-weight: var(--mykn-button-font-weight);
  line-height: calc(var(--mykn-button-line-height) - 2px);
  text-decoration: none;
  transition: all var(--animation-duration-fast)
    var(--animation-timing-function);
  transform: translateY(var(--mykn-button-offset));
  white-space: nowrap;
  width: var(--mykn-button-width);

  &:not([hidden]) {
    display: inline-flex;
  }

  &:disabled,
  &--disabled {
    --mykn-button-offset: 0 !important;
    pointer-events: none;
    opacity: 0.4;
  }

  &--align-start {
    justify-content: start;
    text-align: start;
  }

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

  &--align-space-between {
    justify-content: space-between;
    text-align: center;
  }

  &--align-end {
    justify-content: end;
    text-align: end;
  }

  &--bold {
    --mykn-button-font-weight: var(--typography-font-weight-bold);
  }

  &--justify {
    --mykn-button-width: 100%;
  }

  &--min-width {
    min-width: var(--mykn-button-min-width);
  }

  &--pad-h {
    --mykn-button-padding-h: var(--sizes-spacing-xs-h);
  }

  &--pad-v {
    --mykn-button-padding-v: var(
      --mykn-button-padding-xs,
      var(--sizes-spacing-xs-v)
    );
  }

  &--size-xl {
    --mykn-button-font-size: var(--typography-font-size-xl);
    --mykn-button-line-height: var(--typography-line-height-xl);
    --mykn-button-padding-xs: calc(var(--sizes-spacing-xs-h) / 2);
  }

  &--size-xs {
    --mykn-button-font-size: var(--typography-font-size-body-xs);
    --mykn-button-line-height: var(--typography-line-height-body-xs);
    --mykn-button-padding-xs: calc(var(--sizes-spacing-xs-h) / 2);
  }

  &--size-xxs {
    --mykn-button-font-size: var(--typography-font-size-body-xs);
    --mykn-button-line-height: var(--typography-line-height-body-xs);
    --mykn-button-padding-xs: calc(var(--sizes-spacing-xs-h) / 2);
    --mykn-button-height: calc(3 * var(--sizes-spacing-xs-h) + 2px) !important;
    --mykn-button-width: calc(3 * var(--sizes-spacing-xs-h) + 2px) !important;
  }

  &--rounded {
    border-radius: 100%;
  }

  &--square {
    --mykn-button-height: calc(
      var(--mykn-button-line-height) + 2 *
        var(--mykn-button-padding-xs, var(--mykn-button-padding-v)) + 2px
    );
    --mykn-button-width: calc(
      var(--mykn-button-line-height) + 2 *
        var(--mykn-button-padding-xs, var(--mykn-button-padding-v)) + 2px
    );
    padding-block: 0;
    padding-inline: 0;
    flex-shrink: 0;
  }

  &--variant-primary {
    --mykn-button-color-background: var(--button-primary-default-background);
    --mykn-button-color-border: var(--button-primary-default-border);
    --mykn-button-color-text: var(--button-primary-default-text);
    --mykn-button-color-shadow: var(--button-primary-default-shadow);
    &:focus,
    &:hover {
      --mykn-button-color-background: var(--button-primary-hover-background);
      --mykn-button-color-border: var(--button-primary-hover-border);
      --mykn-button-color-text: var(--button-primary-hover-text);
      --mykn-button-color-shadow: var(--button-primary-hover-shadow);
      --mykn-button-offset: -2px;
    }

    &:active {
      // pressed
      --mykn-button-color-background: var(--button-primary-pressed-background);
      --mykn-button-color-border: var(--button-primary-pressed-border);
      --mykn-button-color-text: var(--button-primary-pressed-text);
      --mykn-button-color-shadow: var(--button-primary-pressed-shadow);
      --mykn-button-offset: 0px;
    }

    &[aria-expanded="true"],
    &#{$self}--active {
      --mykn-button-color-background: var(--button-primary-active-background);
      --mykn-button-color-border: var(--button-primary-active-border);
      --mykn-button-color-text: var(--button-primary-active-text);
      --mykn-button-color-shadow: var(--button-primary-active-shadow);
      --mykn-button-font-weight: var(--typography-font-weight-bold);
    }

    &:disabled,
    &#{$self}--disabled,
    &#{$self}--muted {
      --mykn-button-color-background: var(--button-primary-disabled-background);
      --mykn-button-color-border: var(--button-primary-disabled-border);
      --mykn-button-color-text: var(--button-primary-disabled-text);
      --mykn-button-color-shadow: var(--button-primary-disabled-shadow);
    }
  }

  &--variant-secondary {
    --mykn-button-color-background: var(--button-secondary-default-background);
    --mykn-button-color-border: var(--button-secondary-default-border);
    --mykn-button-color-text: var(--button-secondary-default-text);
    --mykn-button-color-shadow: var(--button-secondary-default-shadow);

    &:focus,
    &:hover {
      --mykn-button-color-background: var(--button-secondary-hover-background);
      --mykn-button-color-border: var(--button-secondary-hover-border);
      --mykn-button-color-text: var(--button-secondary-hover-text);
      --mykn-button-color-shadow: var(--button-secondary-hover-shadow);
      --mykn-button-offset: -2px;
    }

    &:active {
      // pressed
      --mykn-button-color-background: var(
        --button-secondary-pressed-background
      );
      --mykn-button-color-border: var(--button-secondary-pressed-border);
      --mykn-button-color-text: var(--button-secondary-pressed-text);
      --mykn-button-color-shadow: var(--button-secondary-pressed-shadow);
      --mykn-button-offset: 0px;
    }

    &[aria-expanded="true"],
    &#{$self}--active {
      --mykn-button-color-background: var(--button-secondary-active-background);
      --mykn-button-color-border: var(--button-secondary-active-border);
      --mykn-button-color-text: var(--button-secondary-active-text);
      --mykn-button-color-shadow: var(--button-secondary-active-shadow);
      --mykn-button-font-weight: var(--typography-font-weight-bold);
    }

    &:disabled,
    &#{$self}--disabled,
    &#{$self}--muted {
      --mykn-button-color-background: var(
        --button-secondary-disabled-background
      );
      --mykn-button-color-border: var(--button-secondary-disabled-border);
      --mykn-button-color-text: var(--button-secondary-disabled-text);
      --mykn-button-color-shadow: var(--button-secondary-disabled-shadow);
    }
  }

  &--variant-outline {
    --mykn-button-color-background: var(--button-outline-default-background);
    --mykn-button-color-border: var(--button-outline-default-border);
    --mykn-button-color-text: var(--button-outline-default-text);
    --mykn-button-color-shadow: var(--button-outline-default-shadow);

    &:focus,
    &:hover {
      --mykn-button-color-background: var(--button-outline-hover-background);
      --mykn-button-color-border: var(--button-outline-hover-border);
      --mykn-button-color-text: var(--button-outline-hover-text);
      --mykn-button-color-shadow: var(--button-outline-hover-shadow);
      --mykn-button-offset: -2px;
    }

    &:active {
      // pressed
      --mykn-button-color-background: var(--button-outline-pressed-background);
      --mykn-button-color-border: var(--button-outline-pressed-border);
      --mykn-button-color-text: var(--button-outline-pressed-text);
      --mykn-button-color-shadow: var(--button-outline-pressed-shadow);
      //--mykn-button-offset: 0px;
    }

    &[aria-expanded="true"],
    &#{$self}--active {
      --mykn-button-color-background: var(--button-outline-active-background);
      --mykn-button-color-border: var(--button-outline-active-border);
      --mykn-button-color-text: var(--button-outline-active-text);
      --mykn-button-color-shadow: var(--button-outline-active-shadow);
      --mykn-button-font-weight: var(--typography-font-weight-bold);
    }

    &:disabled,
    &#{$self}--disabled,
    &#{$self}--muted {
      --mykn-button-color-background: var(--button-outline-disabled-background);
      --mykn-button-color-border: var(--button-outline-disabled-border);
      --mykn-button-color-text: var(--button-outline-disabled-text);
      --mykn-button-color-shadow: var(--button-outline-disabled-shadow);
    }
  }

  &--variant-transparent {
    --mykn-button-color-background: var(
      --button-transparent-default-background
    );
    --mykn-button-color-border: var(--button-transparent-default-border);
    --mykn-button-color-text: var(--button-transparent-default-text);
    --mykn-button-color-shadow: var(--button-transparent-default-shadow);

    &:focus,
    &:hover {
      --mykn-button-color-background: var(
        --button-transparent-hover-background
      );
      --mykn-button-color-border: var(--button-transparent-hover-border);
      --mykn-button-color-text: var(--button-transparent-hover-text);
      --mykn-button-color-shadow: var(--button-transparent-hover-shadow);
      --mykn-button-offset: -2px;
    }

    &:active {
      // pressed
      --mykn-button-color-background: var(
        --button-transparent-pressed-background
      );
      --mykn-button-color-border: var(--button-transparent-pressed-border);
      --mykn-button-color-text: var(--button-transparent-pressed-text);
      --mykn-button-color-shadow: var(--button-transparent-pressed-shadow);
      --mykn-button-offset: 0px;
    }

    &[aria-expanded="true"],
    &#{$self}--active {
      --mykn-button-color-background: var(
        --button-transparent-active-background
      );
      --mykn-button-color-border: var(--button-transparent-active-border);
      --mykn-button-color-text: var(--button-transparent-active-text);
      --mykn-button-color-shadow: var(--button-transparent-active-shadow);
      --mykn-button-font-weight: var(--typography-font-weight-bold);
    }

    &:disabled,
    &#{$self}--disabled,
    &#{$self}--muted {
      --mykn-button-color-background: var(
        --button-transparent-disabled-background
      );
      --mykn-button-color-border: var(--button-transparent-disabled-border);
      --mykn-button-color-text: var(--button-transparent-disabled-text);
      --mykn-button-color-shadow: var(--button-transparent-disabled-shadow);
    }
  }

  @each $variant in ("info", "success", "warning", "danger") {
    &--variant-#{$variant} {
      --mykn-button-color-background: var(
        --button-#{$variant}-default-background
      );
      --mykn-button-color-border: var(--button-#{$variant}-default-border);
      --mykn-button-color-text: var(--button-#{$variant}-default-text);
      --mykn-button-color-shadow: var(--button-#{$variant}-default-shadow);

      &:focus,
      &:hover {
        --mykn-button-color-background: var(
          --button-#{$variant}-hover-background
        );
        --mykn-button-color-border: var(--button-#{$variant}-hover-border);
        --mykn-button-color-text: var(--button-#{$variant}-hover-text);
        --mykn-button-color-shadow: var(--button-#{$variant}-hover-shadow);
        --mykn-button-offset: -2px;
      }

      &:active {
        // pressed
        --mykn-button-color-background: var(
          --button-#{$variant}-pressed-background
        );
        --mykn-button-color-border: var(--button-#{$variant}-pressed-border);
        --mykn-button-color-text: var(--button-#{$variant}-pressed-text);
        --mykn-button-color-shadow: var(--button-#{$variant}-pressed-shadow);
        --mykn-button-offset: 0px;
      }

      &[aria-expanded="true"],
      &#{$self}--active {
        --mykn-button-color-background: var(
          --button-#{$variant}-active-background
        );
        --mykn-button-color-border: var(--button-#{$variant}-active-border);
        --mykn-button-color-text: var(--button-#{$variant}-active-text);
        --mykn-button-color-shadow: var(--button-#{$variant}-active-shadow);
        --mykn-button-font-weight: var(--typography-font-weight-bold);
      }

      &:disabled,
      &#{$self}--disabled,
      &#{$self}--muted {
        --mykn-button-color-background: var(
          --button-#{$variant}-disabled-background
        );
        --mykn-button-color-border: var(--button-#{$variant}-disabled-border);
        --mykn-button-color-text: var(--button-#{$variant}-disabled-text);
        --mykn-button-color-shadow: var(--button-#{$variant}-disabled-shadow);
      }
    }
  }

  &--wrap {
    flex-wrap: wrap;
    white-space: normal;
  }
}