@import url("./x-link.css");
@import url("../components/c-button.selectors.css");

@define-mixin button {
  --min-width: 75px;
  --mid-width: 110px;
  --max-width: 130px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  line-height: 1.5; /* to make consistent vertical alignment of icons */
  gap: 0.5ch; /* to add space between icons and text */

  /* To ensure identical <button> and <a> instances have same width */
  box-sizing: border-box;

  border-width: var(--global-border-width--normal);
  border-style: solid;

  &:where(:not(:--disabled)) {
    cursor: pointer; /* WARNING: Opinionated */
  }

  /* To align buttons that have icons */
  /* FAQ: Doing for all buttons, for consistent behavior in possible edge case */
  &/*:has(.icon)*/ {
    vertical-align: middle;
  }

  &:where(a) {
    text-decoration: none;
    text-align: center;
  }

  &:--disabled {
    -webkit-user-select: none;
    user-select: none; /* WARNING: Opinionated */
    pointer-events: none; /* Real <button disabled> already blocks this; needed for <a> since HTML has no native disabled state for links */
  }
  &:--disabled:not(
    :--c-button--is-busy
  ) {
    color: var(--global-color-primary--dark);
    border-color: var(--global-color-primary--dark);
  }
  &:--disabled:not(
    :--c-button--is-busy,
    :--c-button--as-link
  ) {
    background-color: var(--global-color-primary--xx-light);
  }

  &:where(:not(
    :--c-button--width-short,
    :--c-button--width-medium,
    :--c-button--width-long,
    :--c-button--size-small,
    :--c-button--as-link
  )) {
    width: auto;
    --max-width: auto;
  }

  /* To position Bootstrap spinner inside TACC's flex-based button */
  & .spinner-border {
    align-self: center;
  }
}
.x-button {
  @mixin button;
}



@define-mixin button--type {
  padding: 6px 18px;
  min-width: var(--min-width);
  max-width: var(--max-width);
}
.x-button--type {
  @mixin button--type;
}



@define-mixin button--type-primary {
  @mixin button--type;

  &:hover {
    color: var(--global-color-primary--xx-light);
    background-color: var(--global-color-accent--dark);
    border-color: var(--global-color-accent--dark);
  }

  &:active:not(
    :--c-button--is-busy
  ) {
    color: var(--global-color-primary--xx-light);
    background-color: var(--global-color-accent--x-dark);
    border-color: var(--global-color-accent--dark);

    border-width: var(--global-border-width--normal);
    outline: var(--global-border-width--normal) solid
      var(--global-color-accent--dark);
  }

  &:focus:not(
    :active,
    :--c-button--is-busy
  ) {
    color: var(--global-color-primary--xx-light);
    background-color: var(--global-color-accent--normal);
    border-color: var(--global-color-primary--xx-light);

    outline: var(--global-border-width--normal) solid
      var(--global-color-accent--light);
  }

  &:--c-button--is-busy,
  &:not(
    :hover,
    :focus,
    :active,
    :--disabled
  ) {
    color: var(--global-color-primary--xx-light);
    background-color: var(--global-color-accent--normal);
    border-color: var(--global-color-accent--normal);
  }
}
.x-button--type-primary {
  @mixin button--type-primary;
}



@define-mixin button--type-secondary {
  @mixin button--type;

  &:hover {
    color: var(--global-color-primary--xx-dark);
    background-color: var(--global-color-accent--x-light);
    border-color: var(--global-color-accent--normal);
  }

  &:active:not(
    :--c-button--is-busy
  ) {
    color: var(--global-color-primary--xx-dark);
    background-color: var(--global-color-accent--x-light);
    border-color: var(--global-color-accent--dark);

    border-width: var(--global-border-width--normal);
    outline: var(--global-border-width--normal) solid
      var(--global-color-accent--dark);
  }

  &:focus:not(
    :active,
    :--c-button--is-busy
  ) {
    color: var(--global-color-primary--xx-dark);
    background-color: var(--global-color-accent--x-light);
    border-color: var(--global-color-primary--xx-dark);

    outline: var(--global-border-width--thick) solid
      var(--global-color-accent--light);
  }

  &:--c-button--is-busy,
  &:not(
    :hover,
    :focus,
    :active,
    :--disabled
  ) {
    color: var(--global-color-primary--xx-dark);
    background-color: var(--global-color-primary--x-light);
    border-color: var(--global-color-primary--xx-dark);
  }

  /* To handle (what?) edge case */
  /* FAQ: Extra specificity is to override (...what?) */
  /* HELP: Document this fix */
  &:--c-button:--disabled {
    background-color: var(--global-color-primary--x-light);
  }
}
.x-button--type-secondary {
  @mixin button--type-secondary;
}



@define-mixin button--type-tertiary {
  @mixin button--type;

  &:hover {
    color: var(--global-color-primary--xx-dark);
    background-color: var(--global-color-primary--light);
    border-color: var(--global-color-accent--dark);
  }

  &:active:not(
    :--c-button--is-busy
  ) {
    color: var(--global-color-primary--xx-dark);
    background-color: var(--global-color-accent--x-light);
    border-color: var(--global-color-accent--dark);

    border-width: var(--global-border-width--normal);
    outline: var(--global-border-width--normal) solid
      var(--global-color-accent--dark);
  }

  &:focus:not(
    :active,
    :--c-button--is-busy
  ) {
    color: var(--global-color-primary--xx-dark);
    background-color: var(--global-color-primary--light);
    border-color: var(--global-color-primary--xx-dark);

    outline: var(--global-border-width--thick) solid
      var(--global-color-accent--light);
  }

  &:--c-button--is-busy,
  &:not(
    :hover,
    :focus,
    :active,
    :--disabled
  ) {
    color: var(--global-color-primary--xx-dark);
    background-color: var(--global-color-primary--xx-light);
    border-color: var(--global-color-primary--xx-dark);
  }
}
.x-button--type-tertiary {
  @mixin button--type-tertiary;
}



@define-mixin button--is-active {
  @mixin button--type;

  &:hover {
    color: var(--global-color-primary--xx-dark);
    background-color: var(--global-color-accent--xx-light);
    border-color: var(--global-color-accent--dark);
  }

  &:active {
    color: var(--global-color-primary--xx-dark);
    background-color: var(--global-color-accent--x-light);
    border-color: var(--global-color-accent--dark);

    border-width: var(--global-border-width--normal);
    outline: var(--global-border-width--normal) solid
      var(--global-color-accent--dark);
  }

  &:focus:not(
    :active
  ) {
    color: var(--global-color-primary--xx-dark);
    background-color: var(--global-color-accent--xx-light);
    border-color: var(--global-color-primary--xx-dark);

    outline: var(--global-border-width--thick) solid
      var(--global-color-accent--light);
  }

  &:--c-button--is-busy,
  &:not(
    :hover,
    :focus,
    :active,
    :--disabled
  ) {
    color: var(--global-color-primary--xx-dark);
    background-color: var(--global-color-accent--x-light);
    border-color: var(--global-color-primary--xx-dark);
  }
}
.x-button--is-active {
  @mixin button--is-active;
}



@define-mixin button--as-link {
  @mixin link;

  background: unset;
  border: unset;
  padding-inline: unset;

  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
}
.x-button--as-link {
  @mixin button--as-link;
}
@define-mixin button--as-link--hover {
  @mixin link--hover;
}
.x-button--as-link--hover {
  @mixin button--as-link--hover;
}
@define-mixin button--as-link--active {
  @mixin link--active;
}
.x-button--as-link--active {
  @mixin button--as-link--active;
}



@define-mixin button--is-busy {
  opacity: 0.5;
  pointer-events: none;

  &:where(a) {
    cursor: default;
  }

  & * {
    opacity: 0.5;
  }
}
.x-button--is-busy {
  @mixin button--is-busy;
}



@define-mixin button--width-short {
  width: var(--min-width);
}
.x-button--width-short {
  @mixin button--width-short;
}
@define-mixin button--width-medium {
  width: var(--mid-width);
}
.x-button--width-medium {
  @mixin button--width-medium;
}
@define-mixin button--width-long {
  width: var(--max-width);
}
.x-button--width-long {
  @mixin button--width-long;
}



@define-mixin button--size-small {
  min-width: 0;
  padding: 4px 9px;
  line-height: 1;
}
.x-button--size-small {
  @mixin button--size-small;
}