docbrown/app/assets/stylesheets/components/buttons.scss

@import '../config/import';

.crayons-btn {
  --brand-apple-bg: #000;
  --brand-apple-color: #fff;
  --brand-apple-bg-hover: #1b1b1b;

  --brand-twitter-bg: #151616;
  --brand-twitter-color: #fff;
  --brand-twitter-bg-hover: #323436;

  --brand-github-bg: #24292e;
  --brand-github-color: #fff;
  --brand-github-bg-hover: #000;

  --brand-facebook-bg: #4267b2;
  --brand-facebook-color: #fff;
  --brand-facebook-bg-hover: #476fbf;

  --brand-forem-bg: #0a3e4a;
  --brand-forem-color: #fff;
  --brand-forem-bg-hover: #05313b;

  --brand-email-bg: #24292e;
  --brand-email-color: #fff;
  --brand-email-bg-hover: #000;

  --brand-google_oauth2-bg: #1da1f2;
  --brand-google_oauth2-color: #fff;
  --brand-google_oauth2-bg-hover: #0096f2;
}

// Basic styling
.crayons-btn {
  // Setup
  --border-width: 0px;
  --shadow-color: rgba(0, 0, 0, 0.05);
  --vertical-padding: var(--su-2);
  --horizontal-padding: var(--su-4);
  --font-size: var(--fs-base);
  --with-icon-padding: var(--su-3);
  --icon-margin: var(--su-2);

  position: relative;
  display: inline-block;
  padding: calc(var(--vertical-padding) - var(--border-width))
    calc(var(--horizontal-padding) - var(--border-width));
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--font-size);
  line-height: var(--su-6); // intentionally not using $lh-* variable.
  font-weight: var(--fw-medium);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-props);
  border: var(--border-width) solid;
  overflow-wrap: normal;

  // Styles
  --bg: var(--button-primary-bg);
  --bg-hover: var(--button-primary-bg-hover);
  --border: transparent;
  --border-hover: transparent;
  --color: var(--button-primary-color);
  --color-hover: var(--button-primary-color-hover);
  --shadow: 0 1px 3px var(--shadow-color);
  --shadow-hover: 0 2px 5px var(--shadow-color);
  --bg-inverted: var(--button-primary-inverted-bg);
  --bg-inverted-hover: var(--button-primary-inverted-bg-hover);
  --color-inverted: var(--button-primary-inverted-color);
  --color-inverted-hover: var(--button-primary-inverted-color-hover);

  background-color: var(--bg);
  border-color: var(--border);
  box-shadow: var(--shadow);
  color: var(--color);

  .js-focus-visible &.focus-visible:focus,
  &:is(label):focus-within {
    background-color: var(--bg-hover);
    color: var(--color-hover);
    z-index: var(--z-elevate);
  }

  .js-focus-visible &.focus-visible:focus,
  &:is(label):focus-within {
    box-shadow: var(--focus-ring);
    outline: 0;
  }

  &[href]:hover,
  &[href]:focus,
  &:hover:enabled,
  &:active:enabled {
    background-color: var(--bg-hover);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-hover);
    color: var(--color-hover);
    z-index: var(--z-elevate);
  }

  &.crayons-btn--inverted {
    --bg: var(--bg-inverted);
    --bg-hover: var(--bg-inverted-hover);
    --border: var(--border-inverted);
    --border-hover: var(--border-inverted-hover);
    --color: var(--color-inverted);
    --color-hover: var(--color-inverted-hover);
  }

  &[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
  }

  &--s {
    --vertical-padding: var(--su-1);
    --horizontal-padding: var(--su-3);
    --font-size: var(--fs-s);
    --with-icon-padding: var(--su-2);
    --icon-margin: var(--su-1);
    font-weight: normal;
  }

  &--l {
    --vertical-padding: var(--su-3);
    --horizontal-padding: var(--su-5);
    --with-icon-padding: var(--su-3);
    --icon-margin: var(--su-2);
  }

  &--xl {
    --vertical-padding: var(--su-4);
    --horizontal-padding: var(--su-6);
    --font-size: var(--fs-l);
    --with-icon-padding: var(--su-5);
    --icon-margin: var(--su-3);
  }

  // This makes sure icons inside buttons don't cause problems with click handlers
  // See: https://css-tricks.com/slightly-careful-sub-elements-clickable-things/
  & > * {
    pointer-events: none;
    + input {
      pointer-events: revert;
    }
  }
}

.crayons-btn--secondary {
  --bg: var(--button-secondary-bg);
  --bg-hover: var(--button-secondary-bg-hover);
  --color: var(--button-secondary-color);
  --color-hover: var(--button-secondary-color-hover);
}

.crayons-btn--outlined {
  --bg: var(--button-outlined-bg);
  --bg-hover: var(--button-outlined-bg-hover);
  --border: var(--button-outlined-border);
  --border-hover: var(--button-outlined-border-hover);
  --color: var(--button-outlined-color);
  --color-hover: var(--button-outlined-color-hover);

  --border-width: 2px;
}

.crayons-btn--danger {
  --bg: var(--accent-danger);
  --bg-hover: var(--accent-danger-darker);
  --color: var(--base-inverted);
  --color-hover: var(--base-inverted);
  --bg-inverted: var(--accent-danger);
  --bg-inverted-hover: var(--accent-danger-darker);
  --color-inverted: var(--base-inverted);
  --color-inverted-hover: var(--base-inverted);
}

.crayons-btn--success {
  --bg: var(--accent-success);
  --bg-hover: var(--accent-success-darker);
  --color: var(--base-inverted);
  --color-hover: var(--base-inverted);
  --bg-inverted: var(--accent-success);
  --bg-inverted-hover: var(--accent-success-darker);
  --color-inverted: var(--base-inverted);
  --color-inverted-hover: var(--base-inverted);
}

.crayons-btn--warning {
  --bg: var(--accent-warning);
  --bg-hover: var(--accent-warning-darker);
  --color: var(--base-inverted);
  --color-hover: var(--base-inverted);
  --bg-inverted: var(--accent-warning);
  --bg-inverted-hover: var(--accent-warning-darker);
  --color-inverted: var(--base-inverted);
  --color-inverted-hover: var(--base-inverted);
}

.crayons-btn--ghost {
  --bg: var(--button-ghost-bg);
  --bg-hover: var(--button-ghost-bg-hover);
  --color: var(--button-ghost-color);
  --color-hover: var(--button-ghost-color-hover);
  --shadow: none;
  --shadow-hover: none;
  --bg-inverted: var(--button-ghost-inverted-bg);
  --bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
  --color-inverted: var(--button-ghost-inverted-color);
  --color-inverted-hover: var(--button-ghost-inverted-color-hover);

  &-brand {
    --bg: var(--button-ghost-bg);
    --bg-hover: var(--button-ghost-bg-hover);
    --color: var(--accent-brand);
    --color-hover: var(--accent-brand-darker);
    --shadow: none;
    --shadow-hover: none;
  }

  &-dimmed {
    --bg: var(--button-ghost-bg);
    --bg-hover: var(--button-ghost-bg-hover);
    --color: var(--button-ghost-dimmed-color);
    --color-hover: var(--button-ghost-dimmed-color-hover);
    --shadow: none;
    --shadow-hover: none;
  }

  &-success {
    --bg: var(--button-ghost-bg);
    --bg-hover: var(--button-ghost-bg-hover);
    --color: var(--accent-success);
    --color-hover: var(--accent-success-darker);
    --shadow: none;
    --shadow-hover: none;
    --bg-inverted: var(--button-ghost-inverted-bg);
    --bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
    --color-inverted: var(--accent-success);
    --color-inverted-hover: var(--accent-success-darker);
  }

  &-danger {
    --bg: var(--button-ghost-bg);
    --bg-hover: var(--button-ghost-bg-hover);
    --color: var(--accent-danger);
    --color-hover: var(--accent-danger-darker);
    --shadow: none;
    --shadow-hover: none;
  }
}

.crayons-btn--brand-apple {
  --bg: var(--brand-apple-bg);
  --bg-hover: var(--brand-apple-bg-hover);
  --color: var(--brand-apple-color);
  --color-hover: var(--brand-apple-color);
  --bg-inverted: var(--brand-apple-bg);
  --bg-inverted-hover: var(--brand-apple-bg-hover);
  --color-inverted: var(--brand-apple-color);
  --color-inverted-hover: var(--brand-apple-color);
}

.crayons-btn--brand-twitter {
  --bg: var(--brand-twitter-bg);
  --bg-hover: var(--brand-twitter-bg-hover);
  --color: var(--brand-twitter-color);
  --color-hover: var(--brand-twitter-color);
  --bg-inverted: var(--brand-twitter-bg);
  --bg-inverted-hover: var(--brand-twitter-bg-hover);
  --color-inverted: var(--brand-twitter-color);
  --color-inverted-hover: var(--brand-twitter-color);
}

.crayons-btn--brand-github {
  --bg: var(--brand-github-bg);
  --bg-hover: var(--brand-github-bg-hover);
  --color: var(--brand-github-color);
  --color-hover: var(--brand-github-color);
  --bg-inverted: var(--brand-github-bg);
  --bg-inverted-hover: var(--brand-github-bg-hover);
  --color-inverted: var(--brand-github-color);
  --color-inverted-hover: var(--brand-github-color);
}

.crayons-btn--brand-facebook {
  --bg: var(--brand-facebook-bg);
  --bg-hover: var(--brand-facebook-bg-hover);
  --color: var(--brand-facebook-color);
  --color-hover: var(--brand-facebook-color);
  --bg-inverted: var(--brand-facebook-bg);
  --bg-inverted-hover: var(--brand-facebook-bg-hover);
  --color-inverted: var(--brand-facebook-color);
  --color-inverted-hover: var(--brand-facebook-color);
}

.crayons-btn--brand-forem {
  --bg: var(--brand-forem-bg);
  --bg-hover: var(--brand-forem-bg-hover);
  --color: var(--brand-forem-color);
  --color-hover: var(--brand-forem-color);
  --bg-inverted: var(--brand-forem-bg);
  --bg-inverted-hover: var(--brand-forem-bg-hover);
  --color-inverted: var(--brand-forem-color);
  --color-inverted-hover: var(--brand-forem-color);
}

.crayons-btn--brand-email {
  --bg: var(--brand-email-bg);
  --bg-hover: var(--brand-email-bg-hover);
  --color: var(--brand-email-color);
  --color-hover: var(--brand-email-color);
  --bg-inverted: var(--brand-email-bg);
  --bg-inverted-hover: var(--brand-email-bg-hover);
  --color-inverted: var(--brand-email-color);
  --color-inverted-hover: var(--brand-email-color);
}

.crayons-btn--brand-google_oauth2 {
  --bg: var(--brand-google_oauth2-bg);
  --bg-hover: var(--brand-google_oauth2-bg-hover);
  --color: var(--brand-google_oauth2-color);
  --color-hover: var(--brand-google_oauth2-color);
  --bg-inverted: var(--brand-google_oauth2-bg);
  --bg-inverted-hover: var(--brand-google_oauth2-bg-hover);
  --color-inverted: var(--brand-google_oauth2-color);
  --color-inverted-hover: var(--brand-google_oauth2-color);
}

// Icon alone
.crayons-btn--icon,
.crayons-btn--icon-rounded {
  --horizontal-padding: var(--su-2);
  padding-left: calc(var(--horizontal-padding) - var(--border-width));
  padding-right: calc(var(--horizontal-padding) - var(--border-width));
  &.crayons-btn--s {
    --horizontal-padding: var(--su-1);
  }

  &.crayons-btn--l {
    --horizontal-padding: var(--su-3);
  }

  &.crayons-btn--xl {
    --horizontal-padding: var(--su-4);
  }
}

.crayons-btn--icon-rounded {
  border-radius: 1000px;
}

// Icon Left
.crayons-btn--icon-left {
  padding-left: calc(var(--with-icon-padding) - var(--border-width));

  .crayons-icon {
    margin-right: var(--icon-margin);
  }
}

// Icon Right
.crayons-btn--icon-right {
  padding-right: calc(var(--with-icon-padding) - var(--border-width));

  .crayons-icon {
    margin-left: var(--icon-margin);
  }
}

.crayons-btn-actions {
  --btn-wrap-gap: var(--su-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  // add negative margin to correct for the bottom margin on the buttons
  margin-bottom: calc(0rem - var(--btn-wrap-gap));
  margin-left: calc(0rem - var(--btn-wrap-gap));

  .crayons-btn {
    margin-left: var(--btn-wrap-gap);
    margin-bottom: var(--btn-wrap-gap);
  }
}

// Grouped buttons
.crayons-btn-group {
  display: flex;

  .crayons-btn {
    border-radius: 0;

    + .crayons-btn:not(.crayons-btn--outlined) {
      box-shadow: var(--shadow), inset 1px 0 0 rgba(0, 0, 0, 0.1);
      margin-left: -1px;

      &:hover {
        box-shadow: var(--shadow-hover), inset 0 0 0 rgba(0, 0, 0, 0.1);
      }
    }

    + .crayons-btn--outlined {
      margin-left: calc(-1 * var(--border-width));
    }

    &:first-child {
      border-top-left-radius: var(--radius);
      border-bottom-left-radius: var(--radius);
    }

    &:last-child {
      border-top-right-radius: var(--radius);
      border-bottom-right-radius: var(--radius);
    }
  }
}

////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////
// .c-btn //////////////////////////////////////////////////
////////////////////////////////////////////////////////////

.c-btn {
  position: relative;
  display: inline-block;
  padding: var(--su-2) var(--su-4);
  border-radius: var(--radius);
  font: inherit;
  text-align: center;
  cursor: pointer;
  border: none;
  overflow-wrap: normal;
  background-color: var(--bg);
  color: var(--color);

  &:hover:enabled,
  .js-focus-visible &.focus-visible:focus,
  &:is(label):focus-within {
    background-color: var(--bg-hover);
    color: var(--color-hover);
    z-index: var(--z-elevate);
  }

  .js-focus-visible &.focus-visible:focus,
  &:is(label):focus-within {
    box-shadow: var(--focus-ring);
    outline: 0;
  }

  &[aria-expanded='true'],
  &[aria-pressed='true'] {
    --bg: var(--btn-current-bg);
    --color: var(--btn-current-color);
    font-weight: var(--fw-bold);
  }

  &[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
  }

  // This makes sure icons inside buttons don't cause problems with click handlers
  // See: https://css-tricks.com/slightly-careful-sub-elements-clickable-things/
  & > * {
    pointer-events: none;
    + input {
      pointer-events: revert;
    }
  }
}

.c-btn {
  --bg: var(--btn-bg);
  --bg-hover: var(--btn-bg-hover);
  --color: var(--btn-color);
  --color-hover: var(--btn-color-hover);

  &.c-btn--destructive {
    --bg: var(--btn-destructive-bg);
    --bg-hover: var(--btn-destructive-bg-hover);
    --color: var(--btn-destructive-color);
    --color-hover: var(--btn-destructive-color-hover);
  }
}

.c-btn--primary {
  --bg: var(--btn-primary-bg);
  --bg-hover: var(--btn-primary-bg-hover);
  --color: var(--btn-primary-color);
  --color-hover: var(--btn-primary-color-hover);

  font-weight: var(--fw-medium);

  &.c-btn--destructive {
    --bg: var(--btn-primary-destructive-bg);
    --bg-hover: var(--btn-primary-destructive-bg-hover);
    --color: var(--btn-primary-destructive-color);
    --color-hover: var(--btn-primary-destructive-color-hover);
  }
}

.c-btn--secondary {
  --bg: var(--btn-secondary-bg);
  --bg-hover: var(--btn-secondary-bg-hover);
  --color: var(--btn-secondary-color);
  --color-hover: var(--btn-secondary-color-hover);
}

.c-btn--icon-alone {
  padding: var(--su-2);
}

.c-btn--icon-left {
  .c-btn__icon {
    margin-right: var(--su-2);
    margin-left: calc(var(--su-1) * -1);
  }
}