/* Buttons
 * -------------------------------------------------------------------------- */

/* Override Mobile Safari's fussy built-in user agent styling */
button { font-family: inherit !important; }

.btn {
  -moz-appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  box-sizing: border-box;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  max-width: 100%;
  display: inline-block;
  margin: 0;
  padding: 0.3em 0.8em;
  font-weight: 500;
  text-decoration: none;
  border-radius: 3rem;
  white-space: nowrap;
  background-color: transparent;
  color: var(--color-txt);
  border: 1px solid var(--color-border--solid);
  transition: background-color 150ms ease;

  &:hover { cursor: pointer; }

  /* Avoid showing outlines for mouse clicks. */
  &:active { box-shadow: none; }

  /* Don't show outlines for mouse interactions */
  &:focus:not(:focus-visible) {
    outline: none;
  }
}

.btn--focusable {
  &:focus,
  &:focus-within {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-focus-ring);
  }
  &::-moz-focus-inner { border: 0; }
}

.btn--non-interactive:hover { cursor: auto; }

.btn--small {
  font-size: var(--font-size-small) !important;
}

.btn--x-small {
  font-size: var(--font-size-x-small) !important;
}

.btn--xx-small {
  font-size: var(--font-size-xx-small) !important;
}

.btn--xxx-small {
  font-size: var(--font-size-xxx-small) !important;
}

.btn--reversed {
  color: var(--color-txt--reversed) !important;

  &.btn--icon::before,
  &.btn--icon-round::before,
  &.btn--plain-icon::before { filter: var(--colorize-inverted-ink); }
}

.btn--reversed-subtle {
  transition: opacity 200ms ease-in;
  opacity: 0.5;

  &:hover { opacity: 1.0; }
}

.btn--borderless {
  border: 0 !important;
}

.btn--full-width {
  width: 100%;
  text-align: center;
}

.btn--full-width\@mobile {
  width: 100%;
  text-align: center;

  @media (min-width: 40em) { width: auto; }
}

.btn--plain {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  border-radius: 0;

  &:hover { cursor: pointer; }

  &:focus,
  &:focus-within {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-focus-ring);
  }
  &::-moz-focus-inner { border: 0; }

  &.btn--underlined {
    border-bottom: 1px solid;
  }
}

.btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-almost-black);

  &.btn--icon::before { filter: var(--colorize-black); }
  &.btn--segmented + &.btn--segmented { margin-left: 2px; }
}

.btn--primary-disabled {
  background: var(--color-disabled);
  border-color: var(--color-disabled);
  color: var(--color-txt--reversed);
}

.btn--primary-placeholder {
  color: var(--color-primary);
}

.btn--secondary {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-txt--reversed);

  &.btn--icon::before { filter: var(--colorize-inverted-ink); }
}

.btn--tertiary {
  background: var(--color-tertiary--contrast);
  border-color: var(--color-tertiary--contrast);
  color: var(--color-txt--reversed);

  [data-color-scheme="dark"] & { color: var(--color-txt); }

  &.btn--icon::before { filter: var(--colorize-white); }
}

.btn--positive {
  background-color: var(--color-positive);
  border-color: var(--color-positive);
  color: var(--color-txt--reversed);

  &.btn--icon::before { filter: var(--colorize-inverted-ink); }
}

.btn--negative {
  background-color: var(--color-negative);
  border-color: var(--color-negative);
  color: var(--color-txt--reversed);

  &.btn--icon::before { filter: var(--colorize-inverted-ink); }
}

.btn--bg--negative-glint {
  background-color: var(--color-bg--negative-glint-thin);
  border-color: var(--color-bg--negative);
  color: var(--color-negative);

  &.btn--icon::before { filter: var(--colorize-red); }
}

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

  &.btn--icon::before,
  &.btn--plain-icon::before,
  &::before { filter: var(--colorize-subtle); }
}

.btn--x-subtle {
  background-color: var(--color-bg--surface);
  border: none;
}

.btn--xx-subtle {
  background-color: var(--color-bg--surface-light);
  border: 0;
}

.btn--surface {
  background: var(--color-bg--main);
  border-color: var(--color-bg--main);
  color: var(--color-txt);
}

.btn--sheet {
  background: var(--color-bg--sheet);
  border-color: var(--color-bg--sheet);
  color: var(--color-txt);
}

.btn--orange {
  background-color: var(--color-unread);
  border-color: var(--color-unread);
  color: var(--color-txt--reversed);

  &.btn--icon::before { filter: var(--colorize-inverted-ink); }
}

.btn--yellow {
  background-color: var(--color-yellow);
  border-color: var(--color-yellow);
  color: var(--color-black);

  &.btn--icon::before { filter: var(--colorize-ink); }
}

.btn--outlined {
  border: 1px solid var(--color-border--solid);
  background-color: transparent;
  color: var(--color-txt);
}

.btn--outlined-secondary {
  border-color: var(--color-secondary);
  color: var(--color-secondary);

  &.btn--icon::before { filter: var(--colorize-blue); }
}

.btn--outlined-tertiary {
  border-color: var(--color-tertiary);
  color: var(--color-tertiary);

  &.btn--icon::before { filter: var(--colorize-purple); }

  .island--note &,
  .posting__note &,
  .step--sticky-note & {
    border-color: var(--color-tertiary--contrast);
    color: var(--color-tertiary--contrast);
  }
}

.btn--outlined-negative {
  border-color: var(--color-negative);
  color: var(--color-negative);

  &.btn--icon::before { filter: var(--colorize-red); }
}

.btn--outlined-positive {
  border-color: var(--color-positive);
  color: var(--color-positive);

  &.btn--icon::before { filter: var(--colorize-green); }
}

.btn--outlined-reversed {
  border-color: var(--color-txt--reversed);
  color: var(--color-txt--reversed);

  &.btn--icon::before { filter: var(--colorize-inverted-ink); }
}

.btn--inline { margin-bottom: -0.8rem !important; }

.btn:disabled,
.btn--disabled,
.signup__step--premium-checkbox:not(:checked) ~ .btn {
  pointer-events: none;
  filter: grayscale(1) opacity(0.3);
  &:hover { cursor: default; }
}

.btn-with-spinner {
  + .spinner { display: none; }

  &.btn--submitting,
  form[data-submitting] &,
  .web-authn-loading & {
    background: var(--color-txt);
    border-color: var(--color-txt);
    color: var(--color-txt);
    filter: grayscale(1) opacity(0.3);
    pointer-events: none;

    &:hover { cursor: default; }

    *,
    &::before,
    &::after {
      visibility: hidden;
    }

    + .spinner {
      display: initial;
      position: absolute;
      left: 0;
      top: 50%;
      right: 0;
      bottom: 0;
      height: 1.5rem;
      margin-top: -0.75rem;
      margin-bottom: 0;

      .txt--small {
        height: 1rem;
        margin-top: -0.5rem;
      }

      .txt--x-small & {
        height: 0.8rem;
        margin-top: -0.3rem;
      }

      .spinner__dot {
        border-color: var(--color-txt--reversed) !important;
        border-width: 2px;
      }
    }

    &.btn--plain {
      background-color: transparent !important;
      color: transparent;
      border-color: transparent;

      + .spinner {
        .spinner__dot { border-color: var(--color-txt) !important; }
      }
    }
  }
}

form[data-submitting] .hide-when-submitting {
  visibility: hidden;
}

.btn--icon {
  padding-left: 2.2em;
  position: relative;

  &::before {
    filter: var(--colorize-ink);
    content: '';
    width: 1em;
    height: 1em;
    position: absolute;
    left: 0.75em;
    top: 50%;
    margin-top: -0.5em;
    background: center / 1em no-repeat;
  }
}

.btn--icon-left {
  padding-left: 1.4em;
  &::before { left: 0; }
}

.btn--icon-right {
  padding-left: 0.8em;
  padding-right: 2.2em;

  &::before {
    right: 0.75em;
    left: auto;
  }
}

.btn--icon-unlabeled {
  text-indent: -999em;
  padding-left: 1em;
  padding-right: 1em;


  &::before {
    left: 0;
    right: 0;
    width: 100%;
  }
}

.btn--plain-icon {
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  line-height: 2.4rem;
  text-indent: -9999px;
  background: transparent;
  position: relative;

  &::before {
    filter: var(--colorize-ink);
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent center / 100% no-repeat;
  }
}

.btn--plain-icon-small {
  &::before { background-size: 66.667%; }
}

.btn--plain-icon-x-small {
  &::before { background-size: 50%; }
}

.btn--icon-subtle {
  &::before { filter: var(--colorize-subtle); }
}

.btn--icon-very-subtle {
  &::before { filter: var(--colorize-very-subtle); }
}

.btn--icon-round {
  width: 2em;
  min-width: 2em;
  height: 2em;
  padding: 0;
  background: transparent;
  border-color: var(--color-border);
  border-radius: 3em;
  text-indent: -999em;
  position: relative;
  overflow: hidden;

  &::before {
    filter: var(--colorize-ink);
    content: "";
    width: 100%;
    height: 100%;
    margin-top: 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: center / 62% no-repeat;
  }

  &.btn--negative {
    background: var(--color-negative);
    border-color: var(--color-negative);
    color: var(--color-txt--reversed);

    &::before {
      filter: var(--colorize-inverted-ink);
    }
  }

  &.btn--subtle,
  &.btn--icon-subtle {
    &::before {
      filter: var(--colorize-subtle);
    }
  }
}

.btn--icon-avatar::before {
  width: 2.25em;
  height: 2.25em;
  left: 50%;
  top: 50%;
  margin-top: -1.125em;
  margin-left: -1.125em;
  background: center / 62% no-repeat;
}

/* Capybara is unable to find buttons with .btn--icon-round class, since its
 * text-indent: -999em; rule pushes the Screen Reader text label off screen. As
 * a temporary measure, add the .btn--icon-round-text-workaround class
 *
 * A long-term solution would involve replacing all instances of
 * .btn--icon-round buttons with content wrapped in screen_reader_tag, then
 * removing the text-indent: rule. */
.btn--icon-text-workaround {
  text-indent: initial;
}

.btn--icon-round-small {
  width: 1.75em;
  height: 1.75em;
}

.btn--icon-round-x-small {
  width: 1.25em;
  height: 1.25em;
  min-width: 1.25em;

  &:before {
    background-size: 100%;
  }
}

.btn--icon-round-secondary {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
  background: var(--color-secondary);

  &.btn--icon::before {
    filter: var(--colorize-inverted-ink);
    margin-top: 0;
  }
}

.btn--icon-round-outlined-secondary {
  border-color: var(--color-secondary);
  color: var(--color-secondary);

  &::before {
    filter: var(--colorize-blue);
    margin-top: 0;
  }
}

.btn--icon-round-outlined-tertiary {
  border-color: var(--color-tertiary--contrast);
  color: var(--color-tertiary--contrast);

  &::before {
    filter: var(--colorize-purple);
    margin-top: 0;
  }
}

.btn--icon-round-outlined-subtle {
  border-color: var(--color-border--heavy);
  color: var(--color-txt--subtle);

  &::before {
    filter: var(--colorize-subtle);
    margin-top: 0;
  }
}

.btn--outlined-subtle {
  border-color: var(--color-border);
}

.btn--icon-home,
.btn--icon-work {
  background-size: auto 1.6rem;
}

/* Special use buttons */
.btn--icon-screener {
  padding-left: 3.1em;

  &::before {
    width: 2em;
    height: 2em;
    background-size: 100%;
    top: 0.5em;
  }
}

.btn--icon-back {
  padding-left: 1.7em;
  width: 5.5em;
  text-align: center;

  &::before {
    left: 0.5em;
    background-image: url("/assets/icons/back-9948358d.svg");
  }
}

.btn--always-dark {
  [data-color-scheme="dark"] & {
    border-color: var(--color-txt--reversed);
    color: var(--color-txt--reversed);

    &::before { filter: none; }
  }
}

.btn--google, .btn--microsoft {
  background-color: rgba(var(--rgb-white), 1);
  color: rgba(var(--rgb-black), 1);

  &::before { filter: none !important; }
}

/* Global nav */
.btn--icon-search::before { background-image: url("/assets/icons/search-2ac0e9c1.svg"); }
.btn--icon-home::before { background-image: url("/assets/icons/home-ef4d1658.svg"); }
.btn--icon-folder::before { background-image: url("/assets/icons/folder-9a103d40.svg"); }
.btn--icon-new-folder::before { background-image: url("/assets/icons/folder-new-8dfc5fd5.svg"); }
.btn--icon-new::before { background-image: url("/assets/icons/add-26c36be2.svg"); }
.btn--icon-work::before { background-image: url("/assets/icons/work-ed3565fd.svg"); }
.btn--icon-clip::before { background-image: url("/assets/icons/clips-04309fa4.svg"); }
.btn--icon-expand::before { background-image: url("/assets/icons/expand-1cb5300d.svg"); }
.btn--icon-arrow-down::before { background-image: url("/assets/icons/arrow-down-c4e19f3d.svg"); }
.btn--icon-help::before { background-image: url("/assets/icons/help-232ec9fb.svg"); }
.btn--icon-help-work::before { background-image: url("/assets/icons/help-other-a03e64bf.svg"); }
.btn--icon-google::before { background-image: url("/assets/logos/google-g-logo-bbcbe230.svg"); }
.btn--icon-microsoft::before { background-image: url("/assets/logos/microsoft-logo-50e310cd.svg"); }

/* Inbox */
.btn--icon-screener::before { background-image: url("/assets/icons/screener-thumbs-bc11ec1e.svg"); }
.btn--icon-key::before { background-image: url("/assets/icons/key-02c48403.svg"); }

/* Inbox Trays */
.btn--icon-laterbox::before { background-image: url("/assets/icons/laterbox-a63ddf86.svg"); }
.btn--icon-asidebox::before { background-image: url("/assets/icons/asidebox-35021bb6.svg"); }

/* General purpose */
.btn--icon-attachment::before { background-image: url("/assets/icons/attachment-7e48463e.svg"); }
.btn--icon-download::before { background-image: url("/assets/icons/download-2f3155b6.svg"); }
.btn--icon-copy::before { background-image: url("/assets/icons/copy-902fc816.svg"); }
.btn--icon-print::before { background-image: url("/assets/icons/print-7f6a41d9.svg"); }
.btn--icon-edit::before { background-image: url("/assets/icons/edit-fe267037.svg"); }
.btn--icon-minimize::before { background-image: url("/assets/icons/arrow-down-c4e19f3d.svg"); }
.btn--icon-maximize::before { background-image: url("/assets/icons/arrow-down-c4e19f3d.svg"); transform: rotate(180deg); }
.btn--icon-files::before { background-image: url("/assets/icons/files-19a4cc8c.svg"); }
.btn--icon-emails::before { background-image: url("/assets/icons/mbox-d431e371.svg"); }
.btn--icon-contacts-import::before { background-image: url("/assets/icons/contact-import-a9580082.svg"); }
.btn--icon-yes::before { background-image: url("/assets/icons/yes-e1419d73.svg"); }
.btn--icon-no::before { background-image: url("/assets/icons/no-3e8a20e2.svg"); }
.btn--icon-done::before { background-image: url("/assets/icons/check-circle-1ec7f2d1.svg"); }
.btn--icon-checkmark::before { background-image: url("/assets/icons/done-c8490dfc.svg"); }
.btn--icon-breakouts::before { background-image: url("/assets/icons/breakout-02b62e62.svg"); }
.btn--icon-autoscreen::before { background-image: url("/assets/icons/screener-c241bb8f.svg"); }
.btn--icon-recycling::before { background-image: url("/assets/icons/recycling-38c0c079.svg"); }
.btn--icon-move::before { background-image: url("/assets/icons/move-069fcd97.svg"); }
.btn--icon-shield--star::before { background-image: url("/assets/icons/shield--star-2c5ec2a6.svg"); }
.btn--icon-time-clock::before { background-image: url("/assets/icons/time-clock-afb81a54.svg"); background-size: 60%; }
.btn--icon-bubble::before { background-image: url("/assets/icons/bubble-e005d95a.svg"); margin: 0; }
.btn--icon-bubbles::before { background-image: url("/assets/icons/bubbles-105ae53a.svg"); }
.btn--icon-bubble-outline::before { background-image: url("/assets/icons/bubble-outline-368a6ccb.svg"); }
.btn--icon-bubble-pop::before { background-image: url("/assets/icons/bubble-pop-0ac51d1e.svg"); }
.btn--icon-bubble-burst::before { background-image: url("/assets/icons/bubble-pop-0ac51d1e.svg"); animation: bubble-burst 0.16s ease-out 0.16s forwards; }
.btn--icon-note::before { background-image: url("/assets/icons/note-3ca458e2.svg"); }
.btn--icon-note--edit::before { background-image: url("/assets/icons/note-edit-99c0c09e.svg"); }
.btn--icon-note--yellow::before { background-image: url("/assets/icons/note-yellow-d96c4d73.svg");  }
.btn--icon-comment::before { background-image: url("/assets/icons/comment-d1848f94.svg"); }
.btn--icon-undo::before { background-image: url("/assets/icons/undo-d96d83b0.svg"); }
.btn--icon-go::before { background-image: url("/assets/icons/go-4bb3b270.svg"); }
.btn--icon-settings::before { background-image: url("/assets/icons/settings-e93270ff.svg"); }
.btn--icon-pencil::before { background-image: url("/assets/icons/pencil-ce3c57fb.svg"); }

.btn--icon-note-add--color::before {
  filter: none !important;
  background-image: url("/assets/icons/note-add--color-d707a552.svg");
  [data-color-scheme="dark"] & {  background-image: url("/assets/icons/note-add--color-dark-d039a057.svg"); }
}

/* Entry actions */
.btn--icon-reply::before { background-image: url("/assets/icons/reply-5d02f10f.svg"); }
.btn--icon-forward::before { background-image: url("/assets/icons/forward-d10635a7.svg"); }
.btn--icon-trash::before { background-image: url("/assets/icons/trash-71dc6f08.svg"); }
.btn--icon-more::before { background-image: url("/assets/icons/more-b85a2fb5.svg"); }
.btn--icon-toggle-expand::before { background-image: url("/assets/icons/toggle-expand-079f0e11.svg"); }

/* Round buttons */
.btn--icon-submit::before { background-image: url("/assets/icons/submit-89214a81.svg"); }
.btn--icon-cancel::before { background-image: url("/assets/icons/cancel-2169cbef.svg"); }
.btn--icon-cancel-outline::before { background-image: url("/assets/icons/cancel-outline-79da8af9.svg"); }
.btn--icon-remove::before { background-image: url("/assets/icons/remove-0944ab0e.svg"); }
.btn--icon-notifications::before { background-image: url("/assets/icons/notification-bell-c3046781.svg"); }
.btn--icon-notifications-off::before { background-image: url("/assets/icons/notification-bell--off-83a7277e.svg"); }
.btn--icon-mute::before { background-image: url("/assets/icons/mute-61340b3d.svg"); }
.btn--icon-alert::before { background-image: url("/assets/icons/alert-diamond-9f87b4c6.svg"); }
.btn--icon-add-small::before { background-image: url("/assets/icons/add-26c36be2.svg"); background-size: 55%; }

/* Entry composer */
.btn--icon-trix::before { background-image: url("/assets/icons/text-options-0937fe62.svg"); }

/* Contacts */
.btn--icon-bundle::before { background-image: url("/assets/icons/bundle-3bf85129.svg"); }
.btn--icon-unbundled::before { background-image: url("/assets/icons/unbundled-7b867c2b.svg"); }
.btn--icon-imbox::before { background-image: url("/assets/icons/imbox-7f1e2804.svg"); }
.btn--icon-feedbox::before { background-image: url("/assets/icons/feedbox-55ae627f.svg"); }
.btn--icon-trailbox::before { background-image: url("/assets/icons/trailbox-c98ccae6.svg"); }
.btn--icon-import::before { background-image: url("/assets/icons/contact-import-a9580082.svg"); }
.btn--icon-forward-together::before { background-image: url("/assets/icons/forward-together-6243c8cd.svg"); }

/* Lightbox */
.btn--icon-previous::before { background-image: url("/assets/icons/arrow-prev-d03ab004.svg"); }
.btn--icon-next::before { background-image: url("/assets/icons/arrow-next-7c779978.svg"); }

/* Cover art */
.btn--icon-cover-art::before { background-image: url("/assets/icons/cover-art-f85ab51a.svg"); }

/* Search filters */
.btn--icon-add::before { background-image: url("/assets/icons/add-26c36be2.svg"); }
.btn--icon-minus::before { background-image: url("/assets/icons/minus-3d0ac5dd.svg"); }
.btn--icon-calendar::before { background-image: url("/assets/icons/calendar-invites-d084ca93.svg"); }
.btn--icon-contacts::before { background-image: url("/assets/icons/contacts-d3969e87.svg"); }
.btn--icon-envelope::before { background-image: url("/assets/icons/envelope-6d02212d.svg"); }
.btn--icon-everything::before { background-image: url("/assets/icons/everything-58bea179.svg"); }
.btn--icon-quotation-mark::before { background-image: url("/assets/icons/quotation-mark-52fcef37.svg"); }

/* Calendar */
.btn--icon-grid::before { background-image: url("/assets/icons/calendar-grid-a573aae4.svg"); }
.btn--icon-timeline::before { background-image: url("/assets/icons/calendar-timeline-25fb0665.svg"); background-size: 1.2em; }
.btn--icon-zoom::before { background-image: url("/assets/icons/zoom-09edf888.svg"); }
.btn--icon-color-scheme-light::before { background-image: url("/assets/icons/color-scheme-light-b417aeac.svg"); }
.btn--icon-link::before { background-image: url("/assets/icons/link-6db04267.svg"); }
.btn--icon-refresh::before { background-image: url("/assets/icons/refresh-6281fe84.svg"); }
.btn--icon-world::before { background-image: url("/assets/icons/world-42cb60e2.svg"); }
.btn--icon-location::before { background-image: url("/assets/icons/location-a6812fe0.svg"); }
.btn--icon-countdown::before { background-image: url("/assets/icons/countdown-bb9edb98.svg"); }
.btn--icon-video::before { background-image: url("/assets/icons/video-ae7194fd.svg"); }
.btn--icon-seen::before { background-image: url("/assets/icons/seen-09edf888.svg"); }
.btn--icon-circle::before { background-image: url("/assets/icons/circle-706e36a4.svg"); }

.btn--toggle {
  text-indent: unset;
  line-height: 2em;
  text-align: center;
  font-weight: bold;
  transition: background-color 150ms ease;

  .radio-button__input:checked + & {
    background-color: var(--color-secondary);
    color: var(--color-txt--reversed);

    &::before {
      filter: var(--colorize-white);
    }

    [data-color-scheme="dark"] & {
      &::before { filter: invert(0%); }
    }
  }
}

.btn--toggle-with-indicator {
  .radio-button__input:checked + & {
    &::before {
      content: '✓';
      line-height: 1.8em;
      margin: 0;
      text-align: center;
      filter: none;
      color: var(--color-txt--reversed);
    }
  }
}

/* Segmented buttons
 * -------------------------------------------------------------------------- */

.btn--segmented {
  border-radius: 0;

  &:active {
    background-color: var(--color-bg--main);
  }
}

.btn--segmented + .btn--segmented {
  border-left: 0;
}

.btn--segmented-active {
  background-color: var(--color-bg--main-reversed);
  color: var(--color-txt--reversed);
}

.btn--segmented-left {
  border-top-left-radius: 3rem;
  border-bottom-left-radius: 3rem;
}

.btn--segmented-right {
  border-top-right-radius: 3rem;
  border-bottom-right-radius: 3rem;
}