/**
 * Styles for HTML5 input and textarea elements. All form elements fit into Assembly's `6px` baseline grid.
 * @section Forms
 */

.fieldset,
.input,
.select,
.textarea {
  /* Reset ... */
  appearance: none;
  font-family: inherit;
  background: var(--transparent);
  border: 0;
  margin: 0;
  padding: 0;
  box-shadow: none;
}

/**
 * The `input` class styles input types `text`, `password`, `email`,
 * `datetime`, `search`, `tel`, `url`, and `number`. The `textarea` class styles the `<textarea>` element.
 *
 * Both form elements fill the width of their container, by default.
 * You should adjust the widths of inputs and textareas by adding [`w*` width classes](#Sizing)
 * or controlling the widths of their containers, e.g. with [`grid` classes](#Grid).
 *
 * @section Inputs & textareas
 * @memberof Forms
 */
.input,
.textarea,
.select {
  box-shadow: inset 0 0 0 1px var(--gray-light);
  padding: 6px 12px;
  border-radius: var(--border-radius);
  transition: background-color var(--transition),
    box-shadow var(--transition);
  display: block;
  width: 100%;
}

.input:focus,
.textarea:focus {
  box-shadow: inset 0 0 0 1px var(--gray);
}

[data-assembly-focus-control='visible'] .select.select--stroke:focus {
  box-shadow: inset 0 0 0 1px var(--gray), var(--focus-shadow);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--disabled75);
}

/* Remove bad padding and unique cancel button from IE and Safari inputs */
.input::-ms-clear,
.input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
.input[type='search'] {
  appearance: none;
}
.input[type='search']::-webkit-search-decoration,
.input[type='search']::-webkit-search-cancel-button {
  appearance: none;
}

/**
 * Style a text input. Set the color of the border with a `input--border-{color}` modifier (`*-dark` colors are not available).
 *
 * @memberof Inputs & textareas
 * @selectors .input
 * @example
 * <input class='input' placeholder='default' />
 * <input class='input input--border-green w240' placeholder='green' />
 */

/**
 * Make an input small.
 *
 * @memberof Inputs & textareas
 * @example
 * <input class='input input--s' placeholder='small' />
 */
.input--s {
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
  padding: 3px 6px;
}

/**
 * Style a textarea. Set the color of the border with a `textarea--border-{color} modifier (`*-deep` and `*-dark` colors are not available).
 *
 * @memberof Inputs & textareas
 * @example
 * <textarea placeholder='default' class='textarea'></textarea>
 * <textarea placeholder='pink' class='textarea textarea--border-pink w240'></textarea>
 */
.textarea {
  resize: vertical;
  /* Without this, IE always has a scrollbar */
  overflow: auto;
}

/**
 * Make a textarea extra small.
 *
 * @memberof Inputs & textareas
 * @example
 * <textarea class='textarea textarea--s'>small textarea</textarea>
 */
.textarea--s {
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
  padding: 3px 6px;
}

/**
 * When `input` and `textarea` elements have a `disabled` attribute, they will be styled accordingly.
 *
 * @memberof Inputs & textareas
 * @example
 * <input disabled class='input' placeholder='disabled' />
 * <textarea disabled class='textarea' placeholder='disabled' value='Disabled'>Disabled text</textarea>
 */
.input:disabled,
.textarea:disabled,
.select--stroke:disabled {
  pointer-events: none;
  color: var(--darken50);
  background-color: var(--disabled10);
  box-shadow: inset 0 0 0 1px var(--disabled25) !important;
}

/* Using the attribute selector instead of the pseudo-class `:read-only`
because it seems to be more cross-browser consistent with all HTML5 input types */
/**
 * When `input` and `textarea` elements have a `readyonly` attribute, they will be styled accordingly.
 *
 * @memberof Inputs & textareas
 * @example
 * <input readonly class='input' placeholder='basic' value='Readonly' />
 * <textarea readonly class='textarea' placeholder='basic' value='Disabled' >Readonly text</textarea>
 */
.input[readonly],
.textarea[readonly] {
  background-color: var(--disabled10);
}

/**
 * The select component styles the `<select>` element. The markup must fit the following pattern:
 * - A wrapping `<div>` with the `select-container` class.
 * - A `<select>` element with the `select` class.
 * - A `<div>` with the `select-arrow` class.
 *
 * @section Selects
 * @memberof Forms
 */

/*
 * Style a select component.
 * Set the text and arrow color by adding a `select--{color}` modifier to the `select` element (`*-dark` colors are not available).
 *
 * @memberof Selects
 * @group
 * @example
 * <div class='select-container'>
 *   <select class='select'>
 *     <option>default</option>
 *     <option>two</option>
 *   </select>
 *   <div class='select-arrow'></div>
 * </div>
 * <div class='select-container'>
 *   <select class='select select--green'>
 *     <option>default</option>
 *     <option>two</option>
 *   </select>
 *   <div class='select-arrow'></div>
 * </div>
 */
.select-container {
  display: inline-flex;
  position: relative;
  align-items: center;
}

.select {
  appearance: none;
  background-color: var(--transparent);
  font-size: var(--font-size-m);
  line-height: var(--line-height-m);
  color: currentColor;
  padding: 6px 30px 6px 0; /* plus arrow */
  cursor: pointer;
  box-shadow: none;
}

.select-arrow {
  position: absolute;
  right: 12px;
  top: calc(50% - 1px);
  pointer-events: none;
  border-left: 4px solid var(--transparent);
  border-right: 4px solid var(--transparent);
  border-top: 5px solid var(--gray);
  width: 8px;
  height: 8px;
  margin-top: -1px;
  transition: border-top-color var(--transition);
}

/** @endgroup */

.select:hover {
  color: var(--gray-deep);
}

.select:focus + .select-arrow {
  border-top-color: var(--gray);
}

/* Some browsers color the option text and background, so reset that */
.select option {
  background-color: var(--white);
  color: var(--gray-deep);
}

.select option:disabled {
  color: var(--darken25);
}

/* IE overrides */
.select::-ms-expand { display: none; }
/* IE actually colors the options, so they can't be white */
.select option { color: var(--gray-deep); }
/* Remove purple highlight in HC mode */
@media all and (-ms-high-contrast: active) {
  .select:focus::-ms-value {
    background-color: var(--transparent);
    color: inherit;
  }
}
/* Remove blue highlight in Normal mode */
@media all and (-ms-high-contrast: none) {
  .select:focus::-ms-value {
    background-color: var(--transparent);
    color: inherit;
  }
}
/* End IE overrides */

/**
 * Make a select component small.
 *
 * @memberof Selects
 * @example
 * <div class='select-container'>
 *   <select class='select select--s'>
 *     <option>one</option>
 *     <option>two</option>
 *   </select>
 *   <div class='select-arrow'></div>
 * </div>
 */
.select--s {
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
  padding: 3px 24px 3px 0; /* plus arrow */
}

.select--s + .select-arrow {
  right: 8px;
}

/**
 * Modify a select component so that it has a border.
 * Set the border and arrow color by adding a `select--{color}` modifier to the `select` element along with the `select--stroke` modifier (`*-dark` colors are not available).
 * Note that the `select--stroke` modifier changes how the color modifier is interpreted.
 *
 * @memberof Selects
 * @example
 * <div class='select-container'>
 *   <select class='select select--stroke'>
 *     <option>one</option>
 *     <option>two</option>
 *   </select>
 *   <div class='select-arrow'></div>
 * </div>
 * <div class='select-container mt6'>
 *   <select class='select select--stroke select--green'>
 *     <option>green</option>
 *     <option>two</option>
 *   </select>
 *   <div class='select-arrow'></div>
 * </div>
 */
.select--stroke {
  padding: 6px 30px 6px 12px; /* plus arrow */
  box-shadow: inset 0 0 0 1px var(--gray-light);
  color: var(--gray) !important;
}

.select--stroke .select--s {
  padding: 3px 24px 3px 6px; /* plus arrow */
}

/**
 * When the `select` element has the `disabled` attribute, the component will be styled accordingly.
 *
 * @memberof Selects
 * @example
 * <div class='select-container'>
 *   <select disabled class='select'>
 *     <option>one</option>
 *     <option>two</option>
 *   </select>
 *   <div class='select-arrow'></div>
 * </div>
  * <div class='select-container'>
 *   <select disabled class='select select--stroke'>
 *     <option>one</option>
 *     <option>two</option>
 *   </select>
 *   <div class='select-arrow'></div>
 * </div>
 */
.select:disabled {
  pointer-events: none;
  color: var(--disabled75);
}

.select:disabled + .select-arrow {
  border-top-color: var(--darken25);
}

/**
 * The `range` class styles the `<input type='range'>` element. The markup must fit the following pattern:
 * - A wrapping `<div>` with the `range` class.
 * - An `<input type='range'>` element.
 *
 * @section Ranges
 * @memberof Forms
 */

/**
 *
 * Style a range element.
 *
 * The best way to vertically align range elements with other items on the same row is to wrap the row in a `flex flex--center-cross` container.
 * For more details, read about the [flexbox classes](#Flexbox).
 *
 * @memberof Ranges
 * @example
 * <div class='range'>
 *   <input type='range' />
 * </div>
*/
.range {
  display: flex;
  align-items: center;
  height: 36px;
}

.range > input {
  appearance: none;
  width: 100%;
  margin: 0;
  border: 0;
  background: var(--transparent);
  cursor: pointer;
  padding: 8px 0; /* widen clickable track area */
}

/* remove additional padding for firefox */
@-moz-document url-prefix('') {
  .range > input {
    padding: 0;
  }
}

/* range track */
.range > input::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: currentColor;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: none;
}

.range > input::-moz-range-track {
  width: 100%;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: currentColor;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: none;
}

/* use fill-lower + fill-upper to set color */
.range > input::-ms-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: var(--transparent);
  border-color: var(--transparent);
  border-width: 12px 0;
  color: var(--transparent);
}

.range > input::-ms-fill-lower {
  background: currentColor;
  border: 0;
  box-shadow: none;
  border-radius: 2px;
}

.range > input::-ms-fill-upper {
  background: currentColor;
  border: 0;
  box-shadow: none;
  border-radius: 2px;
}

/* range thumb */
.range > input::-webkit-slider-thumb {
  box-sizing: border-box;
  transition: background var(--transition);
  appearance: none;
  box-shadow: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: var(--white);
  cursor: grab;
}

.range > input::-moz-range-thumb {
  box-sizing: border-box;
  transition: background var(--transition);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: var(--white);
  cursor: grab;
}

.range > input::-ms-thumb {
  box-sizing: border-box;
  transition: background var(--transition);
  width: 20px;
  height: 20px;
  margin-top: 0; /* Fixes Edge's vertical alignment */
  border-radius: 50%;
  border: 1px solid currentColor;
  background: var(--white);
  cursor: grab;
}

.range > input::-webkit-slider-thumb:active {
  cursor: grabbing;
}

.range > input::-moz-range-thumb:active {
  cursor: grabbing;
}

.range > input::-ms-thumb:active {
  cursor: grabbing;
}

/*
 * Make a range element small.
 *
 * @memberof Ranges
 * @selectors .range--s
 * @example
 * <div class='range range--s'>
 *   <input type='range' />
 * </div>
 */
.range--s {
  height: 24px;
}

.range--s > input {
  padding: 4px 0; /* widen clickable track area */
}

/* remove additional padding for firefox */
@-moz-document url-prefix('') {
  .range--s > input {
    padding: 0;
  }
}

/* range small track */
.range--s > input::-webkit-slider-runnable-track {
  height: 2px;
}
.range.range--s > input::-moz-range-track {
  height: 2px;
}
.range.range--s > input::-ms-track {
  border-width: 9px 0;
  height: 2px;
}

/* range small thumb */
.range--s > input::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -5px;
}

.range--s > input::-moz-range-thumb {
  width: 12px;
  height: 12px;
  margin-top: -5px;
}

.range--s > input::-ms-thumb {
  width: 12px;
  height: 12px;
  margin-top: 0; /* Fixes Edge's vertical alignment */
}

/*
 * When a range element has the `disabled` attribute, it will be styled accordingly.
 *
 * @memberof Ranges
 * @selectors .range:disabled
 * @example
 * <div class='range'>
 *   <input disabled type='range' />
 * </div>
 */
.range > input:disabled::-webkit-slider-runnable-track { background: var(--disabled25); }
.range > input:disabled::-moz-range-track { background: var(--disabled25); }
.range > input:disabled::-ms-fill-upper { background: var(--disabled25); }
.range > input:disabled::-ms-fill-lower { background: var(--disabled25); }

.range > input:disabled::-webkit-slider-thumb { border-color: var(--disabled25); background: var(--gray-faint); }
.range > input:disabled::-ms-thumb { border-color: var(--disabled25); background: var(--gray-faint); }
.range > input:disabled::-moz-range-thumb { border-color: var(--disabled25); background: var(--gray-faint); }

/* shared form styles */
.checkbox-container,
.switch-container,
.radio-container {
  user-select: none;
  display: inline-flex;
}

/* Same as the hide-visually class */
.toggle-container > input,
.checkbox-container > input,
.switch-container > input,
.radio-container > input {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.checkbox,
.radio {
  cursor: pointer;
  top: 3px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: var(--border-radius);
  position: relative;
  border-width: 1px;
  border-style: solid;
  border-color: var(--transparent);
  transition: color var(--transition),
    border var(--transition),
    background-color var(--transition);
}

/**
 * The checkbox component styles the `<input type='checkbox' />` element. The markup must fit the following pattern:
 * - A wrapping `<label>` with the class `checkbox-container`.
 * - An `<input type='checkbox' />`. You may want to add a `mr*` margin-right
 *   class to separate the checkbox from its label.
 * - A `<div>` with the class `checkbox`
 *   containing an `<svg>` with the chosen icon (usually `#icon-check`).
 *
 * @section Checkboxes
 * @memberof Forms
 */

/*
 * Style a checkbox with a label. Change the color of the checkbox with a `checkbox--{color}` modifier (`*-dark` colors are not available).
 * Adjust the line height of the checkbox to match a label with small text with the `checkbox--s-label` modifier.
 *
 * @memberof Checkboxes
 * @example
 *   <label class='checkbox-container'>
 *     <input type='checkbox' />
 *     <div class='checkbox mr6'>
 *       <svg class='icon'><use xlink:href='#icon-check' /></svg>
 *     </div>
 *     More cats
 *   </label>
 *   <label class='txt-s checkbox-container ml24'>
 *     <input type='checkbox' />
 *     <div class='checkbox mr6 checkbox--s-label checkbox--red'>
 *       <svg class='icon'><use xlink:href='#icon-check' /></svg>
 *     </div>
 *     More mice
 *   </label>
 */
.checkbox {
  color: var(--white);
  border-color: var(--gray);
  transition: color var(--transition),
    border var(--transition),
    background-color var(--transition);
}

/* Ensure checkboxes inside buttons look nice */
.btn:not(.btn--stroke) > .checkbox {
  border-color: var(--transparent);
  top: 0;
}

.checkbox > .icon {
  position: absolute;
  width: 18px;
  height: 18px;
  inset: -1px;
  /* Unchecked state */
  display: none;
}

/**
 * The radio component styles the `<input type='radio'>` element. The markup must fit the following pattern:
 * - A wrapping `<label>` with the class `radio-container`.
 * - An `<input type='radio'>`. You may want to add a `mr*` margin-right
 *   class to separate the radio from its label.
 * - A `<div>` with the class `radio`.
 *
 * @section Radio buttons
 * @memberof Forms
 */

/**
 * Style a radio button. Change the color of the radio button with a `radio--{color}` modifier (`*-dark` colors are not available).
 * Adjust the line height of the radio button to match a label with small text with the `radio--s-label` modifier.
 *
 * @memberof Radio buttons
 * @example
 * <label class='radio-container'>
 *   <input name='radio-basic' type='radio'>
 *   <div class='radio mr6'></div>
 *   Orange
 * </label>
 * <label class='txt-s ml24 radio-container'>
 *   <input name='radio-basic' type='radio'>
 *   <div class='radio radio--s-label radio--yellow mr6'></div>
 *   Apple
 * </label>
 */
.radio {
  border-radius: 50%;
  color: var(--gray);
  border-color: currentColor;
}

.radio::before {
  content: '';
  background-color: currentColor;
  border-radius: 50%;
  position: absolute;
  inset: 2px;
  display: none;
}

/**
 * The switch component styles the `<input type='checkbox' />` element. The markup must fit the following pattern:
 * - A wrapping `<label>` with the class `switch-container`.
 * - An `<input type='checkbox' />`. You may want to add a `mr*` margin-right
 *   class to separate the radio from its label.
 * - A `<div>` with the class `switch`.
 *
 * @section Switches
 * @memberof Forms
 */

/**
 * Style a switch.
 * Change the color of the dot when inactive, the border when inactive,
 * and the background when active with a `switch--{color}` modifier (`*-dark` colors are not available).
 * Change the color of the dot when active with a `switch--dot-{color}` modifier. Adjust the line height of the switch to match a label with small text with the `switch--s-label` modifier.
 *
 * @memberof Switches
 * @example
 * <label class='switch-container'>
 *   <input type='checkbox' />
 *   <div class='switch'></div>
 * </label>
 * <label class='switch-container'>
 *   <input type='checkbox' />
 *   <div class='switch switch--pink switch--dot-yellow mr6'></div>
 *   Enabled
 * </label>
 */
.switch {
  cursor: pointer;
  top: 3px;
  flex-shrink: 0;
  position: relative;
  width: 30px;
  height: 18px;
  border-radius: 9999px;
  border-width: 1px;
  border-style: solid;
  border-color: currentColor;
  color: var(--gray);
  transition: color var(--transition),
    background-color var(--transition),
    border-color var(--transition);
}

.switch::after {
  content: '';
  background-color: currentColor;
  position: absolute;
  display: block;
  border-radius: 50%;
  width: calc(50% - 2px);
  left: 2px;
  top: 2px;
  bottom: 2px;
  transition: left var(--transition), background-color var(--transition);
}

/*
 * Make a switch control large.
 *
 * @memberof Switches
 * @example
 * <label class='switch-container'>
 *   <input type='checkbox' />
 *   <div class='switch switch--l mr6'></div>
 *   Really enabled
 * </label>
 */
.switch--l {
  width: 40px;
  height: 24px;
  top: 0;
}

.switch--l::after {
  left: 3px;
  top: 3px;
  bottom: 3px;
  width: calc(50% - 3px);
}

/*
 * The toggle group component styles a set of `<input type=radio'>` elements. The markup must fit the following pattern:
 * - A wrapping `<div>` around all your radio options with the class `toggle-group`.
 * - For each radio option, a wrapping `<label>` with the class `toggle-container`.
 * - For each radio option, an `<input type='radio'>`.
 * - For each radio option, a `<div>` with the class `toggle`.
 *
 * @section Toggle group
 * @memberof Forms
 */

/**
 * Style a toggle group.
 * Change the inactive toggle text color and the active toggle background color with a `toggle--{color}` modifier (`*-dark` colors are not available).
 * Change the active label color with a `toggle--active-{color}` modifier (`*-dark` colors are not available).
 * Change the border radiuses of toggle groups inside small text with `toggle-group--s` on the `toggle-container` element.
 *
 * @group
 * @memberof Toggle group
 * @example
 * <div class='toggle-group mr18'>
 *   <label class='toggle-container'>
 *     <input checked name='toggle-1' type='radio' />
 *     <div class='toggle'>cat</div>
 *   </label>
 *   <label class='toggle-container'>
 *     <input name='toggle-1' type='radio' />
 *     <div class='toggle'>dog</div>
 *   </label>
 * </div>
 */
.toggle-group {
  display: inline-flex;
  text-align: center;
  border-radius: 18px;
}

.toggle-container {
  max-width: 100%;
}

.toggle {
  flex-shrink: 0;
  cursor: pointer;
  color: var(--gray);
  font-size: var(--font-size-s);
  padding: 3px 18px;
  border-radius: 15px; /* fully round by default */
  background-color: var(--transparent);
  transition: color var(--transition),
    background-color var(--transition);
}
/** @endgroup */

/**
 * Make a toggle small.
 *
 * @memberof Toggle group
 * @example
 * <div class='toggle-group'>
 *   <label class='toggle-container'>
 *     <input checked name='toggle-small' type='radio' />
 *     <div class='toggle toggle--s'>mouse</div>
 *   </label>
 *   <label class='toggle-container'>
 *     <input name='toggle-small' type='radio' />
 *     <div class='toggle toggle--s'>cricket</div>
 *   </label>
 * </div>

 */
.toggle--s {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-s);
  padding: 0 12px;
}

/* align labels with small text */
.switch--s-label,
.checkbox--s-label,
.radio--s-label {
  top: 0;
}

input:disabled {
  pointer-events: none;
}

/**
 * When a checkbox has the `disabled` attribute, it will be styled accordingly.
 *
 * @memberof Checkboxes
 * @selectors input:disabled + .checkbox
 * @example
 * <label class="checkbox-container mr6">
 *   <input disabled type='checkbox'>
 *   <div class='checkbox'>
 *     <svg class='icon'><use xlink:href='#icon-check' /></svg>
 *   </div>
 * </label>
 * <label class="checkbox-container">
 *   <input checked disabled type='checkbox'>
 *   <div class='checkbox'>
 *     <svg class='icon'><use xlink:href='#icon-check' /></svg>
 *   </div>
 * </label>
 */

/**
 * When a radio button has the `disabled` attribute, it will be styled accordingly.
 *
 * @memberof Radio buttons
 * @selectors input:disabled + .radio
 * @example
 * <label class='radio-container'>
 *   <input disabled type='radio'>
 *   <div class='radio'></div>
 * </label>
 * <label class='radio-container'>
 *   <input disabled checked type='radio'>
 *   <div class='radio'></div>
 * </label>
 */

/**
 * When a switch has the `disabled` attribute, it will be styled accordingly.
 *
 * @memberof Switches
 * @selectors input:disabled + .switch
 * @example
 * <label class="switch-container mr6">
 *   <input disabled type='checkbox'>
 *   <div class="switch"></div>
 * </label>
 * <label class="switch-container">
 *   <input checked disabled type='checkbox'>
 *   <div class="switch"></div>
 * </label>
 */

input:disabled + .checkbox,
input:disabled + .radio,
input:disabled + .switch,
input:checked:disabled + .checkbox,
input:checked:disabled + .radio,
input:checked:disabled + .switch {
  pointer-events: none;
  color: var(--darken25);
}

input:disabled + .switch {
  border-color: var(--disabled25);
}

input:disabled + .radio,
input:disabled + .checkbox {
  background-color: var(--disabled25);
  border-color: var(--transparent);
}

input:checked:disabled + .checkbox,
input:checked:disabled + .radio,
input:checked:disabled + .switch {
  background-color: var(--disabled25);
}

input:disabled + .switch::after,
input:checked:disabled + .switch::after {
  background-color: var(--darken25);
}

/* State management for checkboxes and radio inputs */
input:checked + .checkbox > .icon,
input:checked + .radio::before {
  display: block;
}

input:checked + .radio {
  color: var(--gray);
}

input:checked + .checkbox {
  border: 1px solid var(--transparent);
  background-color: var(--gray);
}

/* state management for switches */
input:checked + .switch::after {
  left: 50%;
  background-color: var(--white);
}

input:checked + .switch {
  border-color: var(--transparent);
  background-color: var(--gray);
}

/* state management for toggles */
input:checked + .toggle {
  background: var(--gray);
  color: var(--white);
}

/**
 * When a toggle group input has the `disabled` attribute, it will be styled accordingly.
 *
 * @memberof Toggle group
 * @example
 * <div class='toggle-group'>
 *   <label class='toggle-container'>
 *     <input disabled name='pet' type='radio' />
 *     <div class='toggle'>cat</div>
 *   </label>
 *   <label class='toggle-container'>
 *     <input disabled checked name='pet' type='radio' />
 *     <div class='toggle'>dog</div>
 *   </label>
 * </div>
 */
input:disabled + .toggle {
  pointer-events: none;
  color: var(--darken25);
  border-color: var(--transparent);
}

input:checked:disabled + .toggle {
  background-color: var(--disabled25);
  color: var(--darken25);
}