picocss/scss/content/_button.scss

@use "sass:map";
@use "../settings" as *;

@if map.get($modules, "content/button") {
  /**
   * Button
   */

  // Reboot based on :
  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
  // ––––––––––––––––––––

  // 1. Change the font styles in all browsers
  // 2. Remove the margin on controls in Safari
  // 3. Show the overflow in Edge
  #{$parent-selector} button {
    margin: 0; // 2
    overflow: visible; // 3
    font-family: inherit; // 1
    text-transform: none; // 1
  }

  // Correct the inability to style buttons in iOS and Safari
  #{$parent-selector} button,
  #{$parent-selector} [type="submit"],
  #{$parent-selector} [type="reset"],
  #{$parent-selector} [type="button"] {
    -webkit-appearance: button;
  }

  // Pico
  // ––––––––––––––––––––

  #{$parent-selector} button,
  #{$parent-selector} [type="submit"],
  #{$parent-selector} [type="reset"],
  #{$parent-selector} [type="button"],
  #{$parent-selector} [type="file"]::file-selector-button,
  #{$parent-selector} [role="button"] {
    #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
    #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
    #{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
    #{$css-var-prefix}box-shadow: var(#{$css-var-prefix}button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
    padding: var(#{$css-var-prefix}form-element-spacing-vertical)
      var(#{$css-var-prefix}form-element-spacing-horizontal);
    border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
    border-radius: var(#{$css-var-prefix}border-radius);
    outline: none;
    background-color: var(#{$css-var-prefix}background-color);
    box-shadow: var(#{$css-var-prefix}box-shadow);
    color: var(#{$css-var-prefix}color);
    font-weight: var(#{$css-var-prefix}font-weight);
    font-size: 1rem;
    line-height: var(#{$css-var-prefix}line-height);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;

    @if $enable-transitions {
      transition:
        background-color var(#{$css-var-prefix}transition),
        border-color var(#{$css-var-prefix}transition),
        color var(#{$css-var-prefix}transition),
        box-shadow var(#{$css-var-prefix}transition);
    }

    &:is([aria-current]:not([aria-current="false"])),
    &:is(:hover, :active, :focus) {
      #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-hover-background);
      #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover-border);
      #{$css-var-prefix}box-shadow: var(
        #{$css-var-prefix}button-hover-box-shadow,
        0 0 0 rgba(0, 0, 0, 0)
      );
      #{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
    }

    &:focus,
    &:is([aria-current]:not([aria-current="false"])):focus {
      #{$css-var-prefix}box-shadow:
        var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
        0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
    }
  }

  #{$parent-selector} [type="submit"],
  #{$parent-selector} [type="reset"],
  #{$parent-selector} [type="button"] {
    margin-bottom: var(#{$css-var-prefix}spacing);
  }

  // .secondary, .contrast & .outline
  @if $enable-classes {
    // Secondary
    #{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).secondary,
    #{$parent-selector} [type="reset"],
    #{$parent-selector} [type="file"]::file-selector-button {
      #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
      #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
      #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
      cursor: pointer;

      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
        #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
        #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
        #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
      }

      &:focus,
      &:is([aria-current]:not([aria-current="false"])):focus {
        #{$css-var-prefix}box-shadow:
          var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
          0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
      }
    }

    // Contrast
    #{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
      #{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-background);
      #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-border);
      #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);

      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
        #{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-hover-background);
        #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover-border);
        #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
      }

      &:focus,
      &:is([aria-current]:not([aria-current="false"])):focus {
        #{$css-var-prefix}box-shadow:
          var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
          0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}contrast-focus);
      }
    }

    // Outline (primary)
    #{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).outline,
    [type="reset"].outline {
      #{$css-var-prefix}background-color: transparent;
      #{$css-var-prefix}color: var(#{$css-var-prefix}primary);
      #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary);

      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
        #{$css-var-prefix}background-color: transparent;
        #{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
        #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover);
      }
    }

    // Outline (secondary)
    #{$parent-selector}
      :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
    [type="reset"].outline {
      #{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
      #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary);

      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
        #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
        #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover);
      }
    }

    // Outline (contrast)
    #{$parent-selector}
      :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
      #{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
      #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast);

      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
        #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
        #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover);
      }
    }
  } @else {
    // Secondary button without .class
    #{$parent-selector} [type="reset"],
    #{$parent-selector} [type="file"]::file-selector-button {
      #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
      #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
      #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
      cursor: pointer;

      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
        #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
        #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
        #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
      }

      &:focus {
        #{$css-var-prefix}box-shadow:
          var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
          0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
      }
    }
  }

  // Button [disabled]
  #{$parent-selector}
    :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],
  #{$parent-selector}
    :where(fieldset[disabled])
    :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
    opacity: 0.5;
    pointer-events: none;
  }

  // Ghost buttons
  // See: https://github.com/Yohn/PicoCSS/discussions/29
  @if $enable-classes {
    $btn-elements: 'button, [type="button"], [type="submit"], [type="reset"], [role="button"]';
    $btn-is: ':hover, :focus, :active, [aria-current]:not([aria-current="false"])';
    /* Base ghost button style */
    #{$parent-selector} :is(#{$btn-elements}).ghost {
      #{$css-var-prefix}background-color: transparent;
      #{$css-var-prefix}border-color: transparent;
      #{$css-var-prefix}color: var(#{$css-var-prefix}primary);

      &:is(#{$btn-is}) {
        #{$css-var-prefix}background-color: transparent;
        #{$css-var-prefix}border-color: transparent;
        #{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
      }
    }

    /* Secondary ghost button */
    #{$parent-selector} :is(#{$btn-elements}).ghost.secondary {
      #{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
      &:is(#{$btn-is}) {
        #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
      }
    }

    /* Contrast ghost button */
    #{$parent-selector} :is(#{$btn-elements}).ghost.contrast {
      #{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
      &:is(#{$btn-is}) {
        #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
      }
    }
  }
}