@if $enable-classes {

/**
 * Button Styles
 */

  // Button .secondary
  button.secondary,
  input[type="submit"].secondary,
  input[type="reset"],
  a[role="button"].secondary {
    border: var(--button-border-width) solid var(--secondary-border);
    background-color: var(--secondary);
    color: var(--secondary-inverse);

    &:hover,
    &:active,
    &:focus {
      border-color: var(--secondary-hover-border);
      background-color: var(--secondary-hover);
    }

    &:focus {
      @if $enable-important {
        box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus) !important;
      }
      @else {
        box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus);
      }
    }
  }


  // Button .contrast
  button.contrast,
  input[type="submit"].contrast,
  input[type="reset"].contrast,
  a[role="button"].contrast {
    border: var(--button-border-width) solid var(--contrast-border);
    background-color: var(--contrast);
    color: var(--contrast-inverse);

    &:hover,
    &:active,
    &:focus {
      border-color: var(--contrast-hover-border);
      background-color: var(--contrast-hover);
    }

    &:focus {
      box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--contrast-focus);
    }
  }


  // Button .outline
  button.outline,
  input[type="submit"].outline,
  a.outline[role="button"] {
    border: var(--button-border-width) solid var(--primary-border);
    background-color: transparent;
    color: var(--primary);

    &:hover,
    &:active,
    &:focus {
      border: 1px solid var(--primary-hover-border);
      color: var(--primary-hover);
    }
  }


  // Button .outline.secondary
  button.outline.secondary,
  input[type="submit"].outline.secondary,
  input[type="reset"].outline,
  a[role="button"].outline.secondary {
    border: var(--button-border-width) solid var(--secondary-border);
    background-color: transparent;
    color: var(--secondary);

    &:hover,
    &:active,
    &:focus {
      border: 1px solid var(--secondary-hover-border);
      color: var(--secondary-hover);
    }
  }


  // Button .outline.contrast
  button.outline.contrast,
  input[type="submit"].outline.contrast,
  input[type="reset"].outline.contrast,
  a[role="button"].outline.contrast {
    border: var(--button-border-width) solid var(--contrast-border);
    background-color: transparent;
    color: var(--contrast);

    &:hover,
    &:active,
    &:focus {
      border: 1px solid var(--contrast-hover-border);
      color: var(--contrast-hover);
    }
  }
}