/**
 * Although the `btn` class will apply button styling to any element, you should typically apply it to the `<button>` element.
 * Not a `<div>` or `<span>` with a click handler, and not an `<a>` without an `href` attribute.
 * `<button>` is semantically appropriate for anything with a click handler that changes the page dynamically.
 * `<button>`s receive focus, handle keyboard events, can be disabled, and are fully accessible.
 *
 * For actual links, you should usually use an `<a>` with the [`link`](#Links) class.
 *
 * @section Buttons
 */

/**
 * Apply a button style.
 * To change the background color of a button, use a `btn--{color}` modifier  (`*-deep` and `*-dark` colors are not available).
 * Buttons have white text unless combined with a [`color-*`](#Text-colors) class.
 * Buttons have fully rounded corners unless combined with a [`round-*`](#Border-radius) class.
 *
 * @memberof Buttons
 * @example
 * <button class='btn'>Default</button>
 * <button class='btn btn--red'>Color</button>
 * <button class='btn btn--green color-yellow'>More colors</button>
 * <button class='btn round'>Less rounded</button>
 * <div class='px6 py6 bg-blue inline-block'>
 *   <button class='btn btn--white color-blue'>Reverse</button>
 * </div>
 */
.btn {
  display: inline-block;
  font-weight: bold;
  background-color: var(--blue);
  font-size: var(--font-size-s);
  color: var(--white);
  border-radius: 18px; /* fully round by default */
  padding: 6px 18px;
  text-align: center;
  transition: background-color var(--transition),
    border-color var(--transition),
    color var(--transition);
}

/**
 * Modify a button so its text and borders are colored and its background transparent.
 * The border color and text color will always match.
 * To change the text and border color, use a `btn--{color}` modifier (`*-deep` colors are not available).
 *
 * @memberof Buttons
 * @example
 * <button class='btn btn--stroke'>Default</button>
 * <button class='btn btn--stroke btn--red'>Color</button>
 * <button class='btn btn--stroke round'>Less rounded</button>
 * <div class='px6 py6 bg-blue inline-block'>
 *   <button class='btn btn--stroke btn--white'>Reverse</button>
 * </div>
 */
.btn--stroke {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
  color: var(--blue);
}

/**
 * Make a button small.
 *
 * @memberof Buttons
 * @example
 * <button class='btn btn--s'>Small</button>
 */
.btn--s {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-s);
  padding: 3px 12px;
  border-radius: 15px;
}

/**
 * Apply a darker active state to buttons by adding the `is-active` class.
 *
 * @memberof Buttons
 * @selectors .btn.is-active, .btn--stroke.is-active
 * @example
 * <button class='btn is-active'>Active</button>
 * <button class='btn btn--red is-active'>Red and active</button>
 * <button class='btn btn--stroke is-active'>Active</button>
 * <button class='btn btn--stroke btn--red is-active'>Red and active</button>
 */
.btn:hover,
.btn.is-active {
  background-color: var(--blue-deep);
}

.btn--stroke:hover,
.btn--stroke.is-active {
  background-color: transparent;
  color: var(--blue-deep);
}

/**
 * When a button has the `disabled` attribute, it will be styled accordingly.
 *
 * @memberof Buttons
 * @example
 * <button disabled class='btn'>Disabled button</button>
 */
.btn:disabled {
  pointer-events: none;
  color: var(--disabled75);
  background-color: var(--disabled25);
  box-shadow: none;
}

.btn.btn--stroke:disabled {
  pointer-events: none;
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--disabled75);
  color: var(--disabled75);
}

/**
 * Create pill button groups.
 * Pill groups must be wrapped in a `inline-flex` container.
 * Every button in a pill group must have
 * - a `btn` class
 * - any `btn--*` modifiers you want (e.g. `btn--stroke`)
 * - a `btn--pill` *or* `btn--pill-stroke` modifier. Use the `btn--pill-stroke` modifier if the buttons in the pill group are mostly stroke buttons (though active buttons can be non-stroke, if you like that)
 * - a `btn--pill-*` modifier specifying its position (e.g. `btn--pill-hc`)
 *
 * For *horizontal* pills, use
 * - `inline-flex` on the container
 * - `btn btn--pill(-stroke) btn--pill-hc` (center)
 * - `btn btn--pill(-stroke) btn--pill-hl` (left)
 * - `btn btn--pill(-stroke) btn--pill-hr` (right)
 *
 * For *vertical* pills, use
 * - `inline-flex flex--column` on the container
 * - `btn btn--pill(-stroke) btn--pill-vc` (center)
 * - `btn btn--pill(-stroke) btn--pill-vt` (top)
 * - `btn btn--pill(-stroke) btn--pill-vb` (bottom)
 *
 * Pill buttons can be modified and themed in the same ways as regular buttons.
 *
 * @memberof Buttons
 * @example
 * <div class="inline-flex">
 *   <button class="btn btn--pill btn--pill-hl">Left</button>
 *   <button class="btn btn--pill btn--pill-hc">Center</button>
 *   <button class="btn btn--pill btn--pill-hr">Right</button>
 * </div>
 * <div class="inline-flex flex--column">
 *   <button class="btn btn--stroke btn--pill-stroke btn--pill-vt">Top</button>
 *   <button class="btn btn--pill-stroke btn--pill-vc is-active">Center</button>
 *   <button class="btn btn--stroke btn--pill-stroke btn--pill-vb">Bottom</button>
 * </div>
 */
.btn--pill-stroke {
  position: relative;
}

/* Put the active pill on top, so if they're stroke pills its
active color is visible on all borders */
.btn--pill-stroke:hover,
.btn--pill-stroke.is-active {
  z-index: 2;
}

/* Extra .btn in selectors below to increase specificity
against .round class */

/* 1px margins create gutters. -2px margins blend borders */

.btn.btn--pill-hc {
  border-radius: 0 !important;
}

.btn.btn--pill-hl {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.btn.btn--pill-hr {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.btn.btn--pill-hc:not(.btn--pill-stroke),
.btn.btn--pill-hr:not(.btn--pill-stroke) {
  margin-left: 1px;
}

.btn.btn--pill-vc {
  border-radius: 0 !important;
  display: block;
  width: 100%;
}

.btn.btn--pill-vt {
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  display: block;
  width: 100%;
}

.btn.btn--pill-vb {
  border-top-right-radius: 0 !important;
  border-top-left-radius: 0 !important;
  display: block;
  width: 100%;
}

.btn.btn--pill-vc:not(.btn--pill-stroke),
.btn.btn--pill-vb:not(.btn--pill-stroke) {
  margin-top: 1px;
}

.btn--pill-stroke.btn--pill-hc {
  margin-left: -1px;
  margin-right: 0;
}

.btn--pill-stroke.btn--pill-hr {
  margin-left: -1px;
}

.btn--pill-stroke.btn--pill-vc {
  margin-top: -1px;
  margin-bottom: 0;
}

.btn--pill-stroke.btn--pill-vb {
  margin-top: -1px;
}