@import url("../objects/o-section.selectors.css");
@import url("../tools/x-truncate.css");
@import url('../tools/x-link.css');

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

@custom-selector :--disabled
  :disabled,
  :where(a[disabled]);





/* Base */

:--c-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;
}
:--c-button: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 */
:--c-button/*:has(.icon)*/ {
  vertical-align: middle;
}

a:--c-button {
  text-decoration: none;
  text-align: center;
}
a:--c-button--is-busy {
  cursor: default;
}

:--c-button:--disabled {
  -webkit-user-select: none;
  user-select: none; /* WARNING: Opinionated */
}
:--c-button:--disabled:not(
  :--c-button--is-busy
) {
  color: var(--global-color-primary--dark);
  border-color: var(--global-color-primary--dark);
}
:--c-button:--disabled:not(
  :--c-button--is-busy,
  :--c-button--as-link
) {
  background-color: var(--global-color-primary--xx-light);
}





/* Modifiers */



/* Modifiers: Types */

:--c-button--primary,
:--c-button--secondary,
:--c-button--tertiary,
:--c-button--is-active {
  padding: 6px 18px;
  min-width: var(--min-width);
  max-width: var(--max-width);
}

/* Modifiers: Types: Primary */

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

:--c-button--primary: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);
}

:--c-button--primary: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--primary:--c-button--is-busy,
:--c-button--primary: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);
}

/* Modifiers: Types: Secondary */

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

:--c-button--secondary: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);
}

:--c-button--secondary: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--secondary:--c-button--is-busy,
:--c-button--secondary: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:--c-button--secondary:--disabled {
  background-color: var(--global-color-primary--x-light);
}

/* Modifiers: Types: Tertiary */

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

:--c-button--tertiary: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);
}

:--c-button--tertiary: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--tertiary:--c-button--is-busy,
:--c-button--tertiary: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);
}

/* Modifiers: Types: Truncate */

:--c-button--can-truncate {
  @mixin truncate--one-line;
}

/* Modifiers: Types: Is Active */

:--c-button--is-active:hover {
  color: var(--global-color-primary--xx-dark);
  background-color: var(--global-color-accent--xx-light);
  border-color: var(--global-color-accent--dark);
}

:--c-button--is-active: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);
}

:--c-button--is-active: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-active:--c-button--is-busy,
:--c-button--is-active: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);
}

/* Modifiers: Types: As Link */

:--c-button--as-link {
  @mixin link;

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

  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
}
:--c-button--as-link:where(:not(:--disabled)):hover {
  @mixin link--hover;
}
:--c-button--as-link:where(:not(:--disabled)):active {
  @mixin link--active;
}

/* Modifiers: Types: Is Busy */

:--c-button--is-busy {
  opacity: 0.5;
  pointer-events: none;
}
:--c-button--is-busy * {
  opacity: 0.5;
}


/* Modifiers: Sizes */

:--c-button: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;
}
:--c-button--width-short {
  width: var(--min-width);
}
:--c-button--width-medium {
  width: var(--mid-width);
}
:--c-button--width-long {
  width: var(--max-width);
}
:--c-button--size-small {
  min-width: 0;
  padding: 4px 9px;
  line-height: 1;
}





/* Elements */

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