/* TODO dividere in più file secondo la variante? */

button, [role='button'], .btn, .btn-reset, .btn-link {
  &:not([disabled]) {
    cursor: pointer;
  }
  & svg, &[disabled] {
    pointer-events: none;
  }
}

.btn-reset, .btn-link, .btn-close {
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.btn-link[disabled] {
  /* stylelint-disable declaration-no-important */
  font-style: var(--btn-link-disabled-font-style) !important;
  color: var(--btn-link-disabled-color) !important;
  /* stylelint-enable declaration-no-important */
}

a.btn {
  &:focus {
    outline: none;
  }

  &, &:hover, &:active, &:focus-visible, &:visited {
    color: var(--_button-fg-color);
    text-decoration: none;
  }
}

.btn {
  display: inline-block;
  padding: var(--btn-padding-block) var(--btn-padding-inline);
  font-size: var(--btn-font-size);
  font-style: var(--btn-font-style);
  font-weight: var(--btn-font-weight);
  color: var(--_button-fg-color);
  text-align: center;
  text-decoration: none;
  background: var(--_button-bg-color);
  border: var(--btn-border-width) solid var(--_button-border-color);
  border-radius: var(--btn-border-radius);
  box-shadow: none;

  &[disabled] {
    font-style: italic;
    cursor: not-allowed;
    opacity: var(--btn-disabled-opacity);
    filter: grayscale(60%);
  }

  svg {
    width: 1em;
    fill: currentColor;
  }

  &.btn-sm {
    padding: var(--btn-sm-padding-block) var(--btn-sm-padding-inline);
    font-size: var(--btn-sm-font-size);

    svg {
      width: 1.5em;
    }
  }

  &.btn-lg {
    padding: var(--btn-lg-padding-block) var(--btn-lg-padding-inline);
    font-size: var(--btn-lg-font-size);

    svg {
      width: 1.5em;
    }
  }

  &.btn-xl {
    padding: var(--btn-xl-padding-block) var(--btn-xl-padding-inline);
    font-size: var(--btn-xl-font-size);
    --_focus-ring-size: 6px;
  }

  &.btn-hollow {
    border-width: var(--btn-hollow-border-width);
  }


  /* TODO button con solo icona o cosa? controllare: completare o eliminare */
  &.btn-icon {
    display: inline-flex;
    flex-flow: row nowrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding-inline-start: calc(var(--form-control-padding-inline) * 1.5);
    text-align: start;
  }
}