.btn-note {
  width: 100%;

  p {
    margin-bottom: 0.25rem;
    text-align: center;
  }
}

button {
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.875rem;
  line-height: 1rem;
}

form.button_to:has(> .btn-full) {
  width: 100%;
}

.btn, .skeleton-btn {
  /* These color variables will be overridden by the color modifiers.
  To change button colors, change the values of these variables rather than assigning the colors directly. */
  --btn-color: var(--theme-color);
  --btn-dark-color: var(--theme-color-darker);
  --btn-light-color: var(--theme-tenth-opacity-color);

  align-items: center;
  background-color: unset;
  border: none;
  border-radius: var(--border-radius);
  color: var(--btn-color);
  cursor: pointer;
  display: inline-flex;
  flex-direction: row;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  height: auto;
  gap: 0.5rem;
  justify-content: center;
  line-height: 1.5rem;
  margin: 0;
  max-height: 2rem;
  min-width: var(--btn-min-width);
  outline: none;
  overflow: hidden;
  padding: 0.25rem 1rem;
  text-align: center;
  text-transform: capitalize;
  transition: 0.4s ease-out;
  white-space: nowrap;
  width: fit-content;

  & > *, & > svg.mui-icon * {
    transition: 0.4s ease-in-out;
  }

  &.truncate, & > span.truncate {
    white-space: break-spaces;
  }
}

button { /*Removes default button styles*/
  background-color: unset;
  border: none;
}

/* Color */

.btn-success {
  --btn-color: var(--success);
  --btn-dark-color: var(--success-dark);
  --btn-light-color: var(--success-lightest);
}

.btn-warning {
  --btn-color: var(--warning);
  --btn-dark-color: var(--warning-dark);
  --btn-light-color: var(--warning-lightest);
}

.btn-danger {
  --btn-color: var(--danger);
  --btn-dark-color: var(--danger-dark);
  --btn-light-color: var(--danger-lightest);
}

.btn-gray {
  --btn-color: var(--svg-gray);
  --btn-dark-color: var(--gray-700);
  --btn-light-color: var(--gray-400)
}

.btn-white {
  --btn-color: var(--pure-white);
  --btn-dark-color: var(--pure-white);
  --btn-light-color: var(--theme-color-lighter)
}

.btn-cancel {
  --btn-color: var(--svg-gray);
  --btn-dark-color: var(--danger-dark);
  --btn-light-color: var(--danger-lightest)
}

/* Type */

.btn-primary {
  background-color: var(--btn-color);
  color: var(--pure-white);

  & > * {
    color: var(--pure-white);
    fill: var(--pure-white);
  }

  & > svg.mui-icon * {
    --svg-color: var(--pure-white);
  }

  &:hover, &:active, &.active, &[active] {
    background-color: var(--btn-dark-color);
  }
}

.btn-secondary {
  border: 1px solid var(--btn-color);
  color: var(--btn-color);

  & > * {
    color: var(--btn-color);
    fill: var(--btn-color);
  }

  & > svg.mui-icon * {
    --svg-color: var(--btn-color);
  }

  &:hover, &:active, &.active, &[active]  {
    background-color: var(--btn-dark-color);
    border-color: var(--btn-dark-color);
    color: var(--pure-white);

    & > * {
      color: var(--pure-white);
      fill: var(--pure-white);
    }

    & > svg.mui-icon * {
      --svg-color: var(--pure-white);
    }
  }
}

.btn-secondary-branding {
  background-color: var(--brand-turquoise);
  color: var(--brand-charcoal);

  & > * {
    color: var(--brand-charcoal);
    fill: var(--brand-charcoal);
  }

  & > svg.mui-icon * {
    --svg-color: var(--pure-white);
  }

  &:hover, &:active, &.active, &[active] {
    background-color: var(--brand-turquoise-lighter);
  }
}

.btn-secondary-branding--reverse {
  border: 1px solid var(--brand-turquoise);
  background-color: var(--pure-white);
  color: var(--brand-charcoal);

  & > * {
    color: var(--brand-charcoal);
    fill: var(--brand-charcoal);
  }

  & > svg.mui-icon * {
    --svg-color: var(--brand-charcoal);
  }

  &:hover, &:active, &.active, &[active] {
    background-color: var(--brand-turquoise);
  }
}

.btn-tertiary {
  background-color: unset;
  color: var(--btn-color);

  & > * {
    color: var(--btn-color);
    fill: var(--btn-color);
  }

  & > svg.mui-icon * {
    --svg-color: var(--btn-color);
  }

  &:hover {
    color: var(--btn-dark-color);
    background-color: var(--btn-light-color);

    & > * {
      color: var(--btn-dark-color);
      fill: var(--btn-dark-color);
    }

    & > svg.mui-icon * {
      --svg-color: var(--btn-dark-color);
    }
  }

  &:active, &.active, &[active] {
    background-color: var(--btn-dark-color);
    color: var(--pure-white);

    & > * {
      color: var(--pure-white);
      fill: var(--pure-white);
    }

    & > svg.mui-icon * {
      --svg-color: var(--pure-white);
    }
  }

  &.btn-tertiary-branding--reverse {
    background-color: var(--pure-white);
    color: var(--brand-charcoal);

    & > * {
      color: var(--brand-charcoal);
      fill: var(--brand-charcoal);
    }

    & > svg.mui-icon * {
      --svg-color: var(--brand-charcoal);
    }

    &:hover, &:active, &.active, &[active] {
      background-color: var(--brand-turquoise);
    }
  }
}

.btn-form--center {
  align-items: center;
}