.alert-base,
.alert {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  max-width: 100%;
}

.alert-end {
  justify-content: flex-end;
}

.alert-skin,
.alert {
  padding: var(--agnostic-side-padding);
  background: var(--agnostic-gray-light);
}

.alert-icon {
  color: var(--agnostic-gray-mid-dark);
  margin-inline-end: var(--fluid-8);

  /* Ensures our icon doesn't flex grow or shrink */
  flex: 0 0 var(--fluid-24);
}

.alert-border-top {
  border-top: var(--fluid-8) solid var(--agnostic-gray-mid-dark);
}

.alert-border-left {
  border-left: var(--fluid-8) solid var(--agnostic-gray-mid-dark);
}

.alert-border-bottom {
  border-bottom: var(--fluid-8) solid var(--agnostic-gray-mid-dark);
}

.alert-border-right {
  border-right: var(--fluid-8) solid var(--agnostic-gray-mid-dark);
}

.alert-border-all {
  border: var(--fluid-2) solid var(--agnostic-gray-mid-dark);
}

.alert-rounded {
  border-radius: var(--agnostic-alert-radius, var(--agnostic-radius, 0.25rem));
}

.alert-dark {
  color: var(--agnostic-light);
  background: var(--agnostic-dark);
}

.alert-dark .alert-icon,
.alert-dark {
  color: var(--agnostic-light);
}

.alert-warning {
  background: var(--agnostic-warning-light);
  color: var(--agnostic-warning-dark);
}

.alert-warning-icon {
  color: var(--agnostic-warning-border-accent);
  margin-inline-end: var(--fluid-8);

  /* Ensures our icon doesn't flex grow or shrink */
  flex: 0 0 var(--fluid-24);
}

.alert-warning.alert-border-top {
  border-top-color: var(--agnostic-warning-border-accent);
}

.alert-warning.alert-border-left {
  border-left-color: var(--agnostic-warning-border-accent);
}

.alert-warning.alert-border-bottom {
  border-bottom-color: var(--agnostic-warning-border-accent);
}

.alert-warning.alert-border-right {
  border-right-color: var(--agnostic-warning-border-accent);
}

.alert-warning.alert-border-all {
  border: var(--fluid-2) solid var(--agnostic-warning-border);
}

.alert-info {
  background: var(--agnostic-primary-light);
  color: var(--agnostic-primary-dark);
}

.alert-info-icon {
  color: var(--agnostic-primary-dark);
  margin-inline-end: var(--fluid-8);

  /* Ensures our icon doesn't flex grow or shrink */
  flex: 0 0 var(--fluid-24);
}

.alert-info.alert-border-top {
  border-top-color: var(--agnostic-primary-dark);
}

.alert-info.alert-border-left {
  border-left-color: var(--agnostic-primary-dark);
}

.alert-info.alert-border-bottom {
  border-bottom-color: var(--agnostic-primary-dark);
}

.alert-info.alert-border-right {
  border-right-color: var(--agnostic-primary-dark);
}

.alert-info.alert-border-all {
  border: var(--fluid-2) solid var(--agnostic-primary-border);
}

.alert-error {
  background: var(--agnostic-error-light);
  color: var(--agnostic-error-dark);
}

.alert-error-icon {
  color: var(--agnostic-error-dark);
  margin-inline-end: var(--fluid-8);

  /* Ensures our icon doesn't flex grow or shrink */
  flex: 0 0 var(--fluid-24);
}

.alert-error.alert-border-top {
  border-top-color: var(--agnostic-error-dark);
}

.alert-error.alert-border-left {
  border-left-color: var(--agnostic-error-dark);
}

.alert-error.alert-border-bottom {
  border-bottom-color: var(--agnostic-error-dark);
}

.alert-error.alert-border-right {
  border-right-color: var(--agnostic-error-dark);
}

.alert-error.alert-border-all {
  border: var(--fluid-2) solid var(--agnostic-error-border);
}

.alert-success {
  background: var(--agnostic-action-light);
  color: var(--agnostic-action-dark);
}

.alert-success-icon {
  color: var(--agnostic-action-dark);
  margin-inline-end: var(--fluid-8);

  /* Ensures our icon doesn't flex grow or shrink */
  flex: 0 0 var(--fluid-24);
}

.alert-success.alert-border-top {
  border-top-color: var(--agnostic-action-dark);
}

.alert-success.alert-border-left {
  border-left-color: var(--agnostic-action-dark);
}

.alert-success.alert-border-bottom {
  border-bottom-color: var(--agnostic-action-dark);
}

.alert-success.alert-border-right {
  border-right-color: var(--agnostic-action-dark);
}

.alert-success.alert-border-all {
  border: var(--fluid-2) solid var(--agnostic-action-border);
}

/**
 * This is not in toast.css because it's actually applied on the Alert child element
 * conditionally if the Alert is a Toast alert :-)
 */
.alert-toast-shadow {
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 6%), 0 3px 8px 0 rgb(0 0 0 / 7%), 0 6px 18px 0 rgb(0 0 0 / 6%);
}

.alert-toast {
  min-width: 19rem;
  max-width: 100%;
  position: fixed;
  z-index: 1100;
  font-size: var(--agnostic-small);

  /* Optimized to match with the height created when we have a
  24px icon. If no icon, this preserves the toast height. */
  line-height: var(--fluid-24);
  padding: 0;

  /* We use bottom: 0, left: 0 etc., so this
  actually pushes the toast away from edge */
  margin: var(--fluid-16);
}

.avatar,
.avatar-base {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.avatar,
.avatar-skin {
  width: var(--fluid-40);
  height: var(--fluid-40);
  max-width: 100%;
  background: var(--agnostic-gray-extra-light);
  border-radius: 50%;
}

.avatar-square {
  border-radius: 0;
}

.avatar-rounded {
  border-radius: var(--agnostic-radius);
}

.avatar-small {
  font-size: var(--fluid-12);
  width: var(--fluid-32);
  height: var(--fluid-32);
}

.avatar-large {
  width: var(--fluid-48);
  height: var(--fluid-48);
}

.avatar-xlarge {
  font-size: var(--fluid-20);
  width: var(--fluid-64);
  height: var(--fluid-64);
}

.avatar::before {
  content: attr(data-text);
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-info {
  background: var(--agnostic-primary-light);
  color: var(--agnostic-primary-dark);
}

.avatar-warning {
  background: var(--agnostic-warning-light);
  color: var(--agnostic-warning-dark);
}

.avatar-success {
  background: var(--agnostic-action-light);
  color: var(--agnostic-action-dark);
}

.avatar-error {
  background: var(--agnostic-error-light);
  color: var(--agnostic-error-dark);
}

/* Must come after avatar-success, avatatar-warning, etc. so specificity is higher */
.avatar-transparent {
  background: transparent;
}

.avatar-group {
  display: flex;
  flex-direction: row;

  /* TBD -- should we stack these on mobile? */
}

/* Helpful for Vue / Svelte SFC where the .avatar child will not be a global
but CSS Modules class. Unfortunately, it means those have to be spans though.
This should be ok -- it's our Avatar.vue and Avatar.svelte, for example, that
respectively generate the <span> tag in their own templates (not the consumer) */
.avatar-group > span,
.avatar-group .avatar {
  border: 2px solid var(--agnostic-light);
}

.avatar-group > span:not(:first-child),
.avatar-group .avatar:not(:first-child) {
  margin-inline-start: calc(-1 * var(--fluid-10));
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  white-space: nowrap;
  list-style: none;
}

.breadcrumb-item + .breadcrumb-item {
  padding-inline-start: var(--fluid-6);
}

.breadcrumb-item + .breadcrumb-item::before {
  padding-inline-end: var(--fluid-6);
  color: var(--agnostic-gray-mid-dark);
  content: "\203A";
}

.breadcrumb-slash .breadcrumb-item + .breadcrumb-item::before {
  content: "\0002f";
}

.breadcrumb-arrow .breadcrumb-item + .breadcrumb-item::before {
  content: "\02192";
}

.breadcrumb-bullet .breadcrumb-item + .breadcrumb-item::before {
  content: "\02022";
}

.btn-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  user-select: none;
  appearance: none;
  cursor: pointer;
  box-sizing: border-box;
  transition-property: all;
  transition-duration: var(--agnostic-timing-medium);
}

.btn {
  /* TODO test this fallback override syntax is correct */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  user-select: none;
  appearance: none;
  cursor: pointer;
  box-sizing: border-box;
  transition-property: all;
  transition-duration: var(--agnostic-timing-medium);
}

.btn-skin,
.btn {
  color: var(--agnostic-btn-font-color, var(--agnostic-dark));
  background-color: var(--agnostic-btn-bgcolor, var(--agnostic-gray-light));
  border-color: var(--agnostic-btn-bgcolor, var(--agnostic-gray-light));

  /* seems like a reasonable default as chrome picks `outset` which results in a weird 3d effect */
  border-style: solid;
  border-width: var(--agnostic-btn-border-size, 1px);
  font-family: var(--agnostic-btn-font-family, var(--agnostic-font-family-body));
  font-weight: var(--agnostic-btn-font-weight, 400);
  font-size: var(--agnostic-btn-font-size, 1rem);

  /* this can be overriden, but it might mess with the balance of the button heights across variants */
  line-height: var(--agnostic-line-height, var(--fluid-20, 1.25rem));
  padding-block-start: var(--agnostic-vertical-pad, 0.5rem);
  padding-block-end: var(--agnostic-vertical-pad, 0.5rem);
  padding-inline-start: var(--agnostic-side-padding, 0.75rem);
  padding-inline-end: var(--agnostic-side-padding, 0.75rem);
  text-decoration: none;
  text-align: center;
  outline: none;
}

.btn:visited {
  color: var(--agnostic-btn-font-color, var(--agnostic-dark));
}

.btn:hover {
  opacity: 85%;
  text-decoration: none;
}

.btn:active {
  text-shadow: 0 1px 0 rgb(255 255 255 / 30%);
  text-decoration: none;
  transition-duration: 0s;
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 20%);
}

.btn:focus {
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);

  /* Needed for High Contrast mode */
  outline:
    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
    var(--agnostic-focus-ring-outline-color);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;

  /* In order for the focused element's box-shadow to appear above its siblings we need to
  establish a new stacking context: https://stackoverflow.com/a/28042700 */
  isolation: isolate;
}

/*
* Disabled State
*
* The disabled state uses the class .disabled, is-disabled,
* and the form attribute disabled="disabled".
* The use of !important is only added because this is a state
* that must be applied to all buttons when in a disabled state.
*/
.btn.disabled,
.btn:disabled {
  top: 0 !important;
  background: var(--agnostic-btn-disabled-bg, var(--agnostic-gray-mid-dark)) !important;
  text-shadow: 0 1px 1px rgb(255 255 255 / 100%) !important;

  /* primary, secondary, natural, all look same when disabled; and we don't want to
  have an inadvertant looking blue primary border when disabled so it's transparent */
  border-color: transparent;
  color: var(--agnostic-btn-disabled-color, var(--agnostic-gray-dark)) !important;
  cursor: default !important;
  appearance: none !important;
  box-shadow: none !important;
  opacity: 80% !important;
}

.btn-primary {
  background-color: var(--agnostic-btn-primary, var(--agnostic-primary));
  border-color: var(--agnostic-btn-primary, var(--agnostic-primary));
  color: var(--agnostic-btn-primary-color, var(--agnostic-light));
}

/* Border and font is primary. When hovered, we invert with primary background and white font */
.btn-primary.btn-bordered {
  color: var(--agnostic-btn-primary, var(--agnostic-primary));
}

.btn-primary.btn-bordered:hover,
.btn-primary.btn-bordered:focus {
  background-color: var(--agnostic-btn-primary, var(--agnostic-primary));
  color: var(--agnostic-btn-primary-color, var(--agnostic-light));
}

.btn-primary:visited {
  color: var(--agnostic-btn-primary-color, var(--agnostic-light));
}

.btn-secondary {
  background-color: var(--agnostic-btn-secondary, var(--agnostic-secondary));
  border-color: var(--agnostic-btn-secondary, var(--agnostic-secondary));
  color: var(--agnostic-btn-secondary-color, var(--agnostic-light));
}

/* Border and font is secondary. When hovered, we invert with secondary background and white font */
.btn-secondary.btn-bordered {
  color: var(--agnostic-btn-secondary, var(--agnostic-secondary));
}

.btn-secondary.btn-bordered:hover,
.btn-secondary.btn-bordered:focus {
  background-color: var(--agnostic-btn-secondary, var(--agnostic-secondary));
  color: var(--agnostic-btn-secondary-color, var(--agnostic-light));
}

.btn-secondary:visited {
  color: var(--agnostic-btn-secondary-color, var(--agnostic-light));
}

/*
/**
  * Border Buttons
  */
.btn-bordered {
  border-width: 1px;
  background: transparent;
}

/**
  * Sizes
  */
.btn-large {
  font-size: calc(var(--agnostic-btn-font-size, 1rem) + 0.25rem);
  height: 3rem;
  line-height: 3rem;
  padding: 0 3rem;
}

.btn-small {
  font-size: calc(var(--agnostic-btn-font-size, 1rem) - 0.25rem);
  height: 2rem;
  line-height: 2rem;
  padding: 0 2rem;
}

/**
  * Rounded
  */
.btn-rounded {
  border-radius: var(--agnostic-btn-radius, var(--agnostic-radius, 0.25rem));
}

.btn-pill {
  border-radius: 200px;
}

/*
  * Size Adjustment for equal height & width buttons
  *
  * Remove padding
  */
.btn-circle {
  border-radius: 100%;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0 !important;
}

.btn-circle-large {
  font-size: calc(var(--agnostic-btn-font-size, 1rem) + 0.25rem);
  width: 3rem;
  height: 3rem;
}

.btn-circle-small {
  font-size: calc(var(--agnostic-btn-font-size, 1rem) - 0.25rem);
  width: 2rem;
  height: 2rem;
}

/**
 * Button Block (stacked)
 */
.btn-block {
  width: 100%;
}

/* This is a utility class used if you literally want to stack block buttons one after another.
Apply this class to the nth-of-type(2) onwards to ensure the borders line up properly. */
.btn-block-following {
  margin-block-start: -1px;
}

.btn-grouped {
  border-radius: var(--agnostic-btn-radius, var(--agnostic-radius, 0.25rem));
}

.btn-grouped:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-inline-end: -1px;
}

.btn-grouped:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-capsule {
  --padding-side: calc(var(--agnostic-side-padding, 0.75rem) * 1.5);

  border-radius: var(--agnostic-radius-capsule);
  padding-inline-start: var(--padding-side);
  padding-inline-end: var(--padding-side);
}

@media (prefers-reduced-motion), (update: slow) {
  .btn,
  .btn:focus {
    transition-duration: 0.001ms !important;
  }
}

/**
 * Invisible buttons. Generally used for a Cancel or icon button that behaves like a button,
 * semantically and for a11y, but, does so without all the typical "button chrome" behind it.
 */
:is(.btn-link, .btn-blank) {
  font-family: var(--agnostic-btn-font-family, var(--agnostic-font-family-body));
  font-size: var(--agnostic-btn-font-size, 1rem);
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: none;
}

/* Since blank buttons can be used for things like input addons we don't want to go crazy
on the side padding. As such, these have a good bit less then regular buttons. */
.btn-blank {
  --agnostic-btn-blank-side-padding: var(--btn-blank-side-padding, 0.25rem);

  padding-inline-start: var(--agnostic-btn-blank-side-padding);
  padding-inline-end: var(--agnostic-btn-blank-side-padding);
}

/* A button blank with link color text */
.btn-link {
  color: var(--agnostic-btn-primary, var(--agnostic-primary));
}

.btn-link:hover {
  cursor: pointer;
}

/**
 * Button Groups. See also button-core.css which has btn-grouped which needs to be
 * applied to the buttons that are projected within a button group.
 */
.btn-group {
  display: inline-flex;
  flex-direction: row;
}

/**
 * Cards
 *
 * I drew some inspiration from the article on media-query less cards:
 * https://css-tricks.com/how-to-make-a-media-query-less-card-component/
 */
.card,
.card-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

.card-border {
  border: 1px solid var(--agnostic-card-border-color, var(--agnostic-gray-light));
}

.card-rounded {
  border-radius: var(--agnostic-radius, 0.25rem);
}

.card-shadow {
  box-shadow:
    var(--agnostic-card-boxshadow1-offset-x, 0)
    var(--agnostic-card-boxshadow1-offset-y, 0.375rem)
    var(--agnostic-card-boxshadow1-blur, 0.5625rem)
    var(--agnostic-card-boxshadow1-color, rgb(6 6 6 / 7.5%)),
    var(--agnostic-card-boxshadow2-offset-x, 0) var(--agnostic-card-boxshadow2-offset-y, 0)
    var(--agnostic-card-boxshadow2-blur, 1px)
    var(--agnostic-card-boxshadow2-color, rgb(5 5 5 / 10%));
  border-radius: var(--agnostic-card-border-radius, var(--agnostic-radius, 0.25rem));
  overflow: hidden;
}

.card-shadow:hover {
  box-shadow:
    var(--agnostic-card-boxshadow1-offset-x, 0)
    var(--agnostic-card-boxshadow1-offset-y, 0.375rem)
    var(--agnostic-card-boxshadow1-blur, 0.875rem)
    var(--agnostic-card-boxshadow1-color, rgb(4 4 4 / 10%)),
    var(--agnostic-card-boxshadow2-offset-x, 0) var(--agnostic-card-boxshadow2-offset-y, 0)
    var(--agnostic-card-boxshadow2-blur, 2px)
    var(--agnostic-card-boxshadow2-color, rgb(3 3 3 / 10%));
}

/**
 * Animates the y position and box shadow on hover
 */
.card-animated {
  transition:
    box-shadow ease-out 5s,
    transform var(--agnostic-timing-fast)
    cubic-bezier(
      var(--agnostic-card-cubic-1, 0.39),
      var(--agnostic-card-cubic-2, 0.575),
      var(--agnostic-card-cubic-3, 0.565),
      var(--agnostic-card-cubic-4, 1)
    );
}

.card-animated:hover {
  transform: translateY(var(--agnostic-card-translate-y-hover, -3px));
  transition:
    box-shadow ease-out var(--agnostic-timing-fast),
    transform var(--agnostic-timing-slow)
    cubic-bezier(
      var(--agnostic-card-cubic-1, 0.39),
      var(--agnostic-card-cubic-2, 0.575),
      var(--agnostic-card-cubic-3, 0.565),
      var(--agnostic-card-cubic-4, 1)
    );
}

@media (prefers-reduced-motion), (update: slow) {
  .card-animated,
  .card-animated:hover {
    transition-duration: 0.001ms !important;
  }
}

.card-stacked {
  flex-direction: column;
}

.card-success {
  background: var(--agnostic-action-light);
  color: var(--agnostic-action-dark);
}

.card-info {
  background: var(--agnostic-primary-light);
  color: var(--agnostic-primary-dark);
}

.card-error {
  background: var(--agnostic-error-light);
  color: var(--agnostic-error-dark);
}

.card-warning {
  background: var(--agnostic-warning-light);
  color: var(--agnostic-warning-dark);
}

/**
 * These radio and checkbox customizations are an amalgamation of various resources I've
 * found on the internets; from Heydon Pickering's radio article (and his Inclusive Components
 * book), to Sara Soueidan, Scott O'Hara, MDO, and Adrian Roselli's research on the matter
 * of inclusive hiding and custom radio/checkbox inputs.
 */
.checkbox-group,
.radio-group {
  --width-28: calc(7 * var(--fluid-4)); /* 1.75rem/28px */

  border: 1px solid var(--agnostic-checkbox-border-color, var(--agnostic-gray-light));
  padding: var(--fluid-24);
  padding-top: var(--fluid-14);
  border-radius: var(--fluid-8);
}

.checkbox-group-large,
.radio-group-large {
  padding: var(--width-28);
  padding-top: var(--fluid-16);
}

.checkbox-legend,
.radio-legend {
  padding: var(--fluid-2) var(--fluid-14);
  border-radius: var(--fluid-2);
}

/* Hiding technique from https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/
 */
.checkbox,
.radio {
  position: absolute;
  width: var(--fluid-14);
  height: var(--fluid-14);
  opacity: 0%;
}

.checkbox-small,
.radio-small {
  width: var(--fluid-12);
  height: var(--fluid-12);
}

.checkbox-large,
.radio-large {
  width: var(--fluid-16);
  height: var(--fluid-16);
}

.checkbox-label-wrap,
.radio-label-wrap {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.checkbox-label-wrap-inline,
.radio-label-wrap-inline {
  display: inline-flex;
}

.checkbox-label-wrap-inline:not(:last-child),
.radio-label-wrap-inline:not(:last-child) {
  margin-inline-end: var(--fluid-8);
}

/* These are not actual <label> elements but the <span> label copy elements */
.checkbox-label-copy,
.radio-label-copy,
.checkbox-label,
.radio-label {
  display: inline-flex;
  position: relative;
  align-items: center;
  flex-wrap: wrap;
}

.checkbox-label-copy-small,
.radio-label-copy-small {
  font-size: var(--agnostic-small); /* 0.875rem */
}

.checkbox-label-copy-large,
.radio-label-copy-large {
  font-size: calc(var(--agnostic-body) + 2px); /* 1rem + 2px (~18px) */
}

/* The checkmark itself */
.checkbox-label::after {
  content: "";
  position: absolute;
  left: var(--fluid-6);
  top: 1px;
  width: var(--fluid-6);
  height: var(--fluid-12);
  border: solid var(--agnostic-light);
  border-width: 0 var(--fluid-2) var(--fluid-2) 0;
  transform-origin: center center;
  transform: rotate(40deg) scale(0);
  transition-property: border, background-color, transform;
  transition-duration: var(--agnostic-timing-fast);
  transition-timing-function: ease-in-out;
}

.checkbox-label::before,
.radio-label::before {
  content: "";
  display: inline-block;
  margin-inline-end: var(--agnostic-checkbox-spacing-end, 0.75rem);
  transition: var(--agnostic-timing-fast) ease-out all;
}

/* Since we build up the radio size outwardly, it's naturally larger then the checkboxes
 so we add a multiplyer to even those out initially */
.checkbox-label::before {
  border: 2px solid var(--agnostic-checkbox-border-color, var(--agnostic-gray-light));
  width: var(--fluid-16);
  height: var(--fluid-16);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;
}

.radio-label::before {
  width: var(--fluid-14);
  height: var(--fluid-14);
  vertical-align: calc(-1 * var(--fluid-2));
  border-radius: 50%;
  border: var(--fluid-2) solid var(--agnostic-checkbox-light, var(--agnostic-light));
  box-shadow: 0 0 0 var(--fluid-2) var(--agnostic-checkbox-border-color, var(--agnostic-gray-light));
  transition: box-shadow var(--agnostic-timing-fast) ease-out;
}

@media (prefers-reduced-motion), (update: slow) {
  .checkbox-label::after,
  .checkbox-label::before,
  .radio-label::before {
    transition-duration: 0.001ms !important;
  }
}

.checkbox-label-small::after {
  left: calc(1.25 * var(--fluid-4));
  top: 0;
}

.checkbox-label-small::before {
  width: var(--fluid-14);
  height: var(--fluid-14);
}

.radio-label-small::before {
  width: var(--fluid-12);
  height: var(--fluid-12);
}

.checkbox-label-large::after {
  left: calc(1.75 * var(--fluid-4));
}

.checkbox-label-large::before {
  width: var(--fluid-18);
  height: var(--fluid-18);
}

.radio-label-large::before {
  width: var(--fluid-16);
  height: var(--fluid-16);
}

/* the checked style using the :checked pseudo class */
.radio:checked + .radio-label::before {
  background: var(--agnostic-checkbox-fill-color, #08a880);
  box-shadow: 0 0 0 var(--fluid-2) var(--agnostic-checkbox-border-color, var(--agnostic-gray-light));
}

.radio:focus + .radio-label::before {
  /* stylelint-disable-next-line max-line-length */
  box-shadow: 0 0 0 var(--fluid-2) var(--agnostic-checkbox-border-color, var(--agnostic-gray-light)), 0 0 0 calc(1.5 * var(--fluid-2)) var(--agnostic-light), 0 0 0 calc(2.25 * var(--fluid-2)) var(--agnostic-focus-ring-color);
}

.checkbox:focus + .checkbox-label::before {
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);

  /* Needed for High Contrast mode */
  /* stylelint-disable-next-line max-line-length */
  outline: var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style) var(--agnostic-focus-ring-outline-color);
}

.checkbox:checked + .checkbox-label::after {
  transform: rotate(40deg) scale(1);
}

.checkbox:checked + .checkbox-label::before {
  background: var(--agnostic-checkbox-fill-color, #08a880);
  border: 2px solid var(--agnostic-checkbox-fill-color, #08a880);
}

/**
  * Consumer styles <legend> themselves, and can opt to use the .screenreader-only from
  * utilities.css if they're design requires it.
  */
.checkbox-group-hidden,
.radio-group-hidden {
  border: 0;
  margin-block-start: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  margin-block-end: 0;
  padding-block-start: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
  padding-block-end: 0;
}

/* Targets both the label container and the span label that is used
to style the custom radio / checkbox. Note it does NOT target the input
itself. */
.checkbox[disabled] ~ .checkbox-label-copy,
.radio[disabled] ~ .radio-label-copy,
.checkbox-label-wrap[class="disabled"],
.radio-label-wrap[class="disabled"],
.checkbox-label-wrap-inline[class="disabled"],
.radio-label-wrap-inline[class="disabled"] {
  color: var(--agnostic-input-disabled-color, var(--agnostic-disabled-color)) !important;
  appearance: none !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 80% !important;
}

.choice-input-error {
  color: var(--agnostic-input-error-color, var(--agnostic-error));
}

@media screen and (-ms-high-contrast: active) {
  /* High contrast mode outline hacks */
  .checkbox-label-wrap[class="disabled"],
  .radio-label-wrap[class="disabled"],
  .checkbox-label-wrap-inline[class="disabled"],
  .radio-label-wrap-inline[class="disabled"] {
    outline: 2px solid transparent;
    outline-offset: -2px;
  }
}

.close-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  width: var(--fluid-24);
  height: var(--fluid-24);
}

.close-button:hover,
.close-button:active,
.close-button:focus {
  background: none;

  /* Needed for High Contrast mode */
  outline:
    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
    var(--agnostic-focus-ring-outline-color);
}

.close-button:focus {
  box-shadow: 0 0 0 3px var(--agnostic-focus-ring-color);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;
}

.close {
  width: var(--fluid-12);
  height: var(--fluid-12);
  display: inline-block;
  vertical-align: middle;
  line-height: 1em;
  flex-shrink: 0;
  color: currentColor;
}

.close-button .close {
  opacity: 80%;
  transition: opacity var(--agnostic-timing-medium);
}

@media (prefers-reduced-motion), (update: slow) {
  .close-button:focus,
  .close-button .close {
    transition-duration: 0.001ms !important;
  }
}

.close-button-small {
  width: var(--fluid-18);
  height: var(--fluid-18);
}

.close-button-large {
  width: var(--fluid-32);
  height: var(--fluid-32);
}

.close-button-xlarge {
  width: var(--fluid-40);
  height: var(--fluid-40);
}

.close-button-small > .close {
  width: 0.5625rem;
  height: 0.5625rem;
}

.close-button-large > .close {
  width: var(--fluid-16);
  height: var(--fluid-16);
}

.close-button-xlarge > .close {
  width: var(--fluid-20);
  height: var(--fluid-20);
}

.close-button:hover .close {
  opacity: 100%;
}

.collapse-panel {
  margin: 0;
  padding: var(--fluid-16);
}

.dialog h1 {
  margin: 0;

  /* Since this is in a modal we want to force it smaller */
  font-size: var(--agnostic-h3);
  font-weight: 400;
  line-height: 1;
  margin-block-end: var(--fluid-16);
}

.dialog-form-demo > input {
  margin-block-end: var(--fluid-24);
}

.dialog,
.dialog-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.dialog {
  z-index: 1001;
  display: flex;
}

.dialog[aria-hidden="true"] {
  display: none;
}

.dialog-overlay {
  background-color: rgb(50 50 50 / 60%);
  animation: fade-in var(--agnostic-timing-fast) both;
}

.dialog-content {
  background-color: var(--agnostic-light);
  margin: auto;
  z-index: 1001;
  position: relative;
  padding: var(--fluid-16);
  max-width: 90%;
  width: 600px;
  border-radius: var(--agnostic-radius);
}

.dialog-fade-in {
  animation: fade-in var(--agnostic-timing-fast) both;
}

.dialog-slide-up {
  animation: slide-up var(--agnostic-timing-slow) var(--agnostic-timing-fast) both;
}

/**
 * Cannot use two separate CSS classes with animation: foo, bar
 * as the later class will overwrite the first (so this combines)
 */
.dialog-slide-up-fade-in {
  animation:
    fade-in var(--agnostic-timing-fast) both,
    slide-up var(--agnostic-timing-slow) var(--agnostic-timing-fast) both;
}

@media screen and (min-width: 700px) {
  .dialog-content {
    padding: var(--fluid-32);
  }
}

@keyframes fade-in {
  from {
    opacity: 0%;
  }
}

@keyframes slide-up {
  from {
    transform: translateY(10%);
  }
}

/* Shared with AgnosticUI close buton so only need positioning and transition */
.dialog-close {
  position: absolute;
  top: var(--fluid-8);
  right: var(--fluid-8);
}

@media (prefers-reduced-motion), (update: slow) {
  .dialog-slide-up-fade-in,
  .dialog-fade-in,
  .dialog-slide-up,
  .dialog-content {
    transition-duration: 0.001ms !important;
  }
}

@media only screen and (min-width: 576px) {
  .dialog-close {
    top: var(--fluid-12);
    right: var(--fluid-12);
  }
}

@media screen and (min-width: 768px) {
  .dialog-close {
    top: var(--fluid-16);
    right: var(--fluid-16);
  }
}

/**
 * Place these alongside the content like:
 * <div class="dialog-content drawer-content drawer-slide-start"...
 */
.drawer-slide-start {
  animation: slide-start var(--agnostic-timing-fast) ease-in-out;
}

.drawer-slide-end {
  animation: slide-end var(--agnostic-timing-fast) ease-in-out;
}

.drawer-slide-bottom {
  animation: slide-bottom var(--agnostic-timing-fast) ease-in-out;
}

.drawer-slide-top {
  animation: slide-top var(--agnostic-timing-fast) ease-in-out;
}

@keyframes slide-top {
  from {
    transform: translateY(-100%);
  }
}

@keyframes slide-bottom {
  from {
    transform: translateY(100%);
  }
}

@keyframes slide-start {
  from {
    transform: translateX(-100%);
  }
}

@keyframes slide-end {
  from {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion), (update: slow) {
  .drawer-slide-top,
  .drawer-slide-bottom,
  .drawer-slide-start,
  .drawer-slide-end {
    transition-duration: 0.001ms !important;
  }
}

.drawer-start {
  right: initial;
}

.drawer-start[aria-hidden] {
  transform: none;
}

.drawer-end {
  left: initial;
}

.drawer-end[aria-hidden] {
  transform: none;
}

.drawer-top {
  bottom: initial;
  transform: none;
}

.drawer-top[aria-hidden] {
  transform: none;
}

.drawer-bottom {
  top: initial;
  transform: none;
}

.drawer-bottom[aria-hidden] {
  transform: none;
}

.drawer-content {
  margin: initial;
  max-width: initial;
  border-radius: initial;
}

.drawer-start .drawer-content,
.drawer-end .drawer-content {
  width: 25rem;
}

.drawer-top .drawer-content,
.drawer-bottom .drawer-content {
  height: 25vh;
  width: 100%;
}

.disclose {
  margin-block-end: var(--fluid-4);

  /* When this element is a direct child of a flex container with
  flex-direction: column it collapses similar to an inline element even though
  it's block. This helps prevent that. */
  width: 100%;
}

.disclose-title {
  display: block;
  cursor: pointer;
  font-weight: 600;
  padding: var(--fluid-8) var(--fluid-12);

  /* Required to position the icon absolutely */
  position: relative;
  color: inherit;
  transition: color var(--agnostic-timing-slow);
}

.disclose-panel {
  font-weight: 400;
  padding: var(--fluid-16);
}

.disclose-title,
.disclose-panel {
  margin: 0;
}

/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
.disclose-title::webkit-details-marker {
  display: none;
}

.disclose-bordered .disclose-title {
  border: 1px solid var(--agnostic-gray-light);
}

.disclose-bg .disclose-title {
  background-color: var(--agnostic-gray-light);
}

.disclose-title:focus {
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);

  /* Needed for High Contrast mode */
  outline:
    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
    var(--agnostic-focus-ring-outline-color);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;
}

.disclose-title::after {
  color: var(--agnostic-gray-dark);
  content: "\203A";
  position: absolute;
  right: var(--fluid-12);
  top: 0;
  bottom: 0;

  /* Chevron thinning :) */
  font-size: var(--fluid-32);
  line-height: 1;
  font-weight: 100;
  transition: transform var(--agnostic-timing-slow);
  transform: rotate(0);
}

@media (prefers-reduced-motion), (update: slow) {
  .disclose-title,
  .disclose-title:focus,
  .disclose-title::after {
    transition: none;
  }
}

.disclose[open] > .disclose-title::after {
  transform: rotate(90deg);
}

.divider {
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  width: 100%;
}

.divider::before,
.divider::after {
  content: "";
  background-color: var(--agnostic-gray-mid);
  height: var(--fluid-2);
  flex-grow: 1;
}

.divider-small::before,
.divider-small::after {
  height: 1px;
}

.divider-large::before,
.divider-large::after {
  height: var(--fluid-4);
}

.divider-xlarge::before,
.divider-xlarge::after {
  height: var(--fluid-6);
}

.divider-justify-end::after,
.divider-justify-start::before {
  flex-grow: 0;
  flex-basis: 3%;
}

.divider-content {
  padding-inline-start: var(--fluid-16);
  padding-inline-end: var(--fluid-16);
}

.divider-vertical {
  height: auto;
  margin: 0 var(--fluid-16);
  width: var(--fluid-16);
  flex-direction: column;
  align-self: stretch;
}

.divider-vertical::before,
.divider-vertical::after {
  width: var(--fluid-2);
}

.divider-vertical.divider-small::before,
.divider-vertical.divider-small::after {
  width: 1px;
}

.divider-vertical.divider-large::before,
.divider-vertical.divider-large::after {
  width: var(--fluid-4);
}

.divider-vertical.divider-xlarge::before,
.divider-vertical.divider-xlarge::after {
  width: var(--fluid-6);
}

.divider-vertical .divider-content {
  padding-inline-start: var(--fluid-24);
  padding-inline-end: var(--fluid-24);

  /* Since we're vertical we need space from line above/below */
  padding-block-start: var(--fluid-6);
  padding-block-end: var(--fluid-6);
}

.divider-warning::before,
.divider-warning::after {
  background-color: var(--agnostic-warning-border);
}

.divider-warning .divider-content {
  color: var(--agnostic-warning-border);
}

.divider-error::before,
.divider-error::after {
  background-color: var(--agnostic-error);
}

.divider-error .divider-content {
  color: var(--agnostic-error);
}

.divider-success::before,
.divider-success::after {
  background-color: var(--agnostic-action);
}

.divider-success .divider-content {
  color: var(--agnostic-action);
}

.divider-info::before,
.divider-info::after {
  background-color: var(--agnostic-primary);
}

.divider-info .divider-content {
  color: var(--agnostic-primary);
}

.empty-base,
.empty {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  text-align: center;
  width: 100%;
}

.empty {
  padding: calc(2 * var(--agnostic-side-padding));
  background: var(--agnostic-gray-extra-light);
}

.empty-bordered {
  background: transparent;
  border: 1px solid var(--agnostic-gray-light);
}

.empty-rounded {
  border-radius: var(--agnostic-radius);
}

.empty-actions {
  margin-block-start: var(--spacing-24);
}

.header,
.header-base {
  display: block;
}

.header-base img,
.header img {
  max-width: 100%;
  height: auto;
}

.header,
.header-skin {
  background-color: var(--agnostic-header-background-color, var(--agnostic-light));
  box-shadow:
    var(--agnostic-header-box-shadow-hor, 0) var(--agnostic-header-box-shadow-ver, 1px)
    var(--agnostic-header-box-shadow-blur, 5px) var(--agnostic-header-box-shadow-spread, 2px)
    var(--agnostic-header-box-shadow-color, rgb(0 0 0 / 10%));
  font-family: var(--agnostic-header-font-family, var(--agnostic-font-family-body));
  border-bottom: 1px solid var(--agnostic-header-border-color, var(--agnostic-gray-light));
  padding-block-start: var(--agnostic-vertical-pad, 0.5rem);
  padding-block-end: var(--agnostic-vertical-pad, 0.5rem);
  padding-inline-start: var(--fluid-24);
  padding-inline-end: var(--fluid-24);
}

.header-content {
  width: var(--agnostic-header-content-width, 960px);
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-flow: wrap column;
}

/**
 * If you make your header sticky, you should likely consider that jump links
 * e.g. <h1 id="Jump-Here">... will tuck underneath the header! Here's a recommendation
 * for how to circumnavigate this issue via scroll-margin-top:
  h1[id],
  h2[id],
  h3[id],
  h4[id],
  h5[id],
  h6[id] {
    scroll-margin-top: 80px;
  }
 * In this case I have a 64px tall header so I've added 16px for clearance -- you'll need
 * to curate your own use case, but scroll-margin-top is super useful for this use case.
 */

.header-sticky {
  position: relative;
  top: 0;
  z-index: 10;
}

@media (min-width: 960px) {
  .header-sticky {
    position: sticky;
  }

  .header-content {
    flex-direction: row;
    justify-content: space-between;
  }

  .header-content-start {
    justify-content: flex-start;
  }

  .header-content-end {
    justify-content: flex-end;
  }
}

/* Goes on the <ul> */
.header-nav {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 960px) {
  .header-nav {
    flex-direction: row;
  }
}

.header-nav-item {
  display: inline-block;
}

.header-nav-item:not(:last-child) {
  margin-inline-end: initial;
  margin-block-end: var(--fluid-8);
}

.header-nav-item a {
  color: var(--agnostic-header-color, var(--agnostic-font-color));
}

@media (min-width: 960px) {
  .header-nav-item:not(:last-child) {
    margin-inline-end: var(--agnostic-header-nav-spacing, var(--fluid-32));
    margin-block-end: initial;
  }
}

.icon-svg {
  width: var(--fluid-16);
  height: var(--fluid-16);
  fill: currentColor;
}

.icon-svg-14 {
  width: var(--fluid-14);
  height: var(--fluid-14);
}

.icon-svg-16 {
  width: var(--fluid-16);
  height: var(--fluid-16);
}

.icon-svg-18 {
  width: var(--fluid-18);
  height: var(--fluid-18);
}

.icon-svg-20 {
  width: var(--fluid-20);
  height: var(--fluid-20);
}

.icon-svg-24 {
  width: var(--fluid-24);
  height: var(--fluid-24);
}

.icon-svg-32 {
  width: var(--fluid-32);
  height: var(--fluid-32);
}

.icon-svg-36 {
  width: var(--fluid-36);
  height: var(--fluid-36);
}

.icon-svg-40 {
  width: var(--fluid-40);
  height: var(--fluid-40);
}

.icon-svg-48 {
  width: var(--fluid-48);
  height: var(--fluid-48);
}

.icon-svg-56 {
  width: var(--fluid-56);
  height: var(--fluid-56);
}

.icon-svg-64 {
  width: var(--fluid-64);
  height: var(--fluid-64);
}

.icon-svg-info {
  color: var(--agnostic-primary);
}

.icon-svg-action,
.icon-svg-success {
  color: var(--agnostic-action);
}

.icon-svg-warning {
  color: var(--agnostic-warning-border-accent);
}

.icon-svg-error {
  color: var(--agnostic-error);
}

.icon-base {
  display: inline-flex;
  text-align: center;

  /* Ensures no "stretching" of icons to reach 100% of container's width */
  max-width: 100%;

  /* Ensure SVGs don't have click events -- typically we want enclosing button to handle */
  pointer-events: none;
  user-select: none;
}

/* We need to make both the span and svg same height (span .icon-svg) */
.icon,
.icon-skin {
  width: var(--fluid-16);
  height: var(--fluid-16);
}

.icon-14 {
  width: var(--fluid-14);
  height: var(--fluid-14);
}

.icon-16 {
  width: var(--fluid-16);
  height: var(--fluid-16);
}

.icon-18 {
  width: var(--fluid-18);
  height: var(--fluid-18);
}

.icon-20 {
  width: var(--fluid-20);
  height: var(--fluid-20);
}

.icon-24,
.icon-svg-24 {
  width: var(--fluid-24);
  height: var(--fluid-24);
}

.icon-32 {
  width: var(--fluid-32);
  height: var(--fluid-32);
}

.icon-36 {
  width: var(--fluid-36);
  height: var(--fluid-36);
}

.icon-40 {
  width: var(--fluid-40);
  height: var(--fluid-40);
}

.icon-48 {
  width: var(--fluid-48);
  height: var(--fluid-48);
}

.icon-56 {
  width: var(--fluid-56);
  height: var(--fluid-56);
}

.icon-64 {
  width: var(--fluid-64);
  height: var(--fluid-64);
}

.input-base,
.input {
  /* Note this cannot be user-select: none else mobile safari won't accept input:
  https://stackoverflow.com/questions/49889003/cannot-write-into-input-field-on-safari/49901069
   */
  user-select: initial;
  appearance: none;
  box-sizing: border-box;

  /* Use the same color for the cursor */
  caret-color: currentColor;
}

.label,
.label-base {
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-family: inherit;
}

/* Electing to scope these as opposed to doing :root level definitions */
.field-help,
.field-help-large,
.field-help-small,
.field-error,
.field-error-large,
.field-error-small,
.label-skin,
.label,
.input-addon-container,
.input-small,
.input-large,
.input-skin,
.input-underlined,
.input-underlined-bg,
.input {
  color: var(--agnostic-font-color, var(--agnostic-dark));
  font-family: var(--agnostic-font-family-body);
  font-weight: var(--agnostic-font-weight, 300);
  font-size: var(--agnostic-font-size, 1rem);
  line-height: var(--agnostic-line-height, var(--fluid-20, 1.25rem));
  width: 100%;
  max-width: 100%;
}

.input-skin,
.input {
  /* seems like a reasonable default as chrome picks `outset` which results in a weird 3d effect */
  border-style: solid;

  /* this can be overriden, but it might mess with the balance of the button heights across variants */
  border-width: var(--agnostic-input-border-size, 1px);
  border-color: var(--agnostic-input-border-color, var(--agnostic-gray-light));

  /* these can be overriden, but it might mess with the balance of the inputheights across variants */
  padding-block-start: var(--agnostic-input-vertical-pad, 0.5rem);
  padding-block-end: var(--agnostic-input-vertical-pad, 0.5rem);
  padding-inline-start: var(--agnostic-input-side-padding, 0.75rem);
  padding-inline-end: var(--agnostic-input-side-padding, 0.75rem);

  /* Note we only want to set properties that we actually want
  to transition in. For example, if we transition "all", the
  inputs will "grow in" on page load—not a happy effect :) */
  transition-property: box-shadow;
  transition-duration: var(--agnostic-input-timing, var(--agnostic-timing-medium));
}

.label {
  display: inline-block;

  /* Provided --agnostic-input-vertical-pad isn't overriden we'll get 20px
  label w/a 6px margin then a 38px input = 64 which is on the 8pt grid */
  margin-block-start: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  margin-block-end: var(--agnostic-input-label-pad, 0.375rem);
  vertical-align: initial;
}

/* Reset field errors and help text to be 2px less then input font size */
.field-help,
.field-error {
  font-size: calc(var(--agnostic-font-size, 1rem) - 2px);
}

.label-inline,
.input-inline {
  width: auto;
}

/* When inlined, the margin-block-end will throw the label off-center with adjacent input */
.label-inline {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: var(--agnostic-input-side-padding, 0.75rem);
}

/**
* Placeholder
*/

/* stylelint-disable-next-line */
.input::-webkit-input-placeholder {
  color: currentColor;
  opacity: 50%;
  transition: opacity var(--agnostic-timing-fast) ease-out;
}

/* stylelint-disable-next-line */
.input::placeholder {
  color: currentColor;
  opacity: 50%;
  transition: opacity var(--agnostic-timing-fast) ease-out;
}

/* stylelint-disable-next-line */
.input::-ms-placeholder {
  color: currentColor;
  opacity: 50%;
  transition: opacity var(--agnostic-timing-fast) ease-out;
}

/* stylelint-disable-next-line */
.input:-ms-placeholder {
  color: currentColor;
  opacity: 50%;
  transition: opacity var(--agnostic-timing-fast) ease-out;
}

/**
* Underlined inputs
*/
.input-underlined {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-color: var(--agnostic-input-underlined-color, var(--agnostic-gray-mid-dark));
  background-color: transparent;
}

.input-underlined-bg {
  background-color: var(--agnostic-input-underlined-bg-color, var(--agnostic-gray-extra-light));
}

/**
* Rounded inputs
*/
.input-rounded {
  border-radius: var(--agnostic-radius, 0.25rem);
}

/**
 * Errors
 * We provide a class-based approach to setting errors which means we do
 * not support :invalid, so it requires custom use of html4 validation API
 * (see https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
 * of the example in corresponding input.html file). The reason I elected to
 * not include :invalid, is it seems to result in "shouting" at the user as
 * I did not find an easy way to only kick in errors after a certain number
 * of characters have been type (blur is actually better but I did not
 * implement that in the contrived example).
 */
.label-error {
  color: var(--agnostic-input-error-color, var(--agnostic-error));
}

.input-error {
  border-color: var(--agnostic-input-error-color, var(--agnostic-error));
}

.label-error,
.field-error,
.field-error-small,
.field-error-large {
  color: var(--agnostic-input-error-color, var(--agnostic-error));
}

.field-help,
.field-help-small,
.field-help-large {
  color: var(--agnostic-input-help-color, var(--agnostic-gray-dark));
}

.field-help,
.field-help-small,
.field-help-large,
.field-error,
.field-error-small,
.field-error-large {
  display: inline-block;
  width: 100%;
  margin-block-start: calc(var(--agnostic-input-vertical-pad, 0.5rem) / 2);
}

/**
  * Sizes
  */
.input-large {
  font-size: calc(var(--agnostic-font-size, 1rem) + 0.25rem);
  line-height: 1.6rem;
}

.field-help-large,
.field-error-large {
  /* We initially remove -2px from font-size so setting to font-size essentially adds the 2px back */
  font-size: var(--agnostic-font-size, 1rem);
}

.label-large {
  font-size: calc(var(--agnostic-font-size, 1rem) + 0.25rem);
}

.input-small {
  font-size: calc(var(--agnostic-font-size, 1rem) - 0.25rem);
  line-height: 1rem;
}

.field-help-small,
.field-error-small,
.label-small {
  font-size: calc(var(--agnostic-font-size, 1rem) - 0.25rem);
}

.input:focus {
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);

  /* Needed for High Contrast mode */
  outline:
    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
    var(--agnostic-focus-ring-outline-color);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;
}

/* Set the focus to transparent when there's an error since we use
borders that visually conflict. */
.input-error:focus {
  box-shadow: 0 0 0 3px transparent;
}

/*
* Disabled State
*
* The disabled state uses the class .disabled,
* and the form attribute disabled="disabled".
* The use of !important is only added because this is a state
* that must be applied to all inputs when in a disabled state.
*/
.input.disabled, /* DEPRECATED -- TODO remove class based disabled */
.input:disabled {
  background: var(--agnostic-input-disabled-bg, var(--agnostic-disabled-bg)) !important;
  color: var(--agnostic-input-disabled-color, var(--agnostic-disabled-color)) !important;
  appearance: none !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 80% !important;
}

@media screen and (-ms-high-contrast: active) {
  /* High contrast mode outline hacks */

  /* styleint-disable-next-line no-descending-specificity  */
  .input:disabled {
    outline: 2px solid transparent;
    outline-offset: -2px;
  }
}

/**
 * Input "has addon"
 */

.input-addon-container {
  display: flex;
  position: relative;
  width: 100%;
  min-height: 100%;
}

.input-has-left-addon {
  padding-left: calc(var(--agnostic-side-padding) * 3);
}

.input-has-right-addon {
  padding-right: calc(var(--agnostic-side-padding) * 3);
}

.input-addon-left {
  left: var(--agnostic-input-side-padding);
}

.input-addon-right {
  right: var(--agnostic-input-side-padding);
}

@media (prefers-reduced-motion), (update: slow) {
  /* stylelint-disable selector-no-vendor-prefix */
  .input-skin,
  .input,
  .input::placeholder,
  .input::-webkit-input-placeholder,
  .input::-ms-placeholder,
  .input:-ms-placeholder,
  .input:focus {
    transition-duration: 0.001ms !important;
  }
}

/*
* Input addons e.g. icons inside the input
*/
.input-addon-right,
.input-addon-left {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;

  /* This allows an icon to sit in the vertical center regardless
  of if we've applied input-large or input-small */
  min-height: 100%;
}

.input-addon-left {
  left: var(--agnostic-input-side-padding);
}

.input-addon-right {
  right: var(--agnostic-input-side-padding);
}

.loader {
  --loading-color: var(--agnostic-loading-color, var(--agnostic-dark));
  --loading-size: var(--fluid-16);
  --loading-size-small: var(--fluid-12);
  --loading-size-large: var(--fluid-18);

  position: relative;
  box-sizing: border-box;
  animation: blink 1s infinite;
  animation-delay: 250ms;

  /* Make up for negative positioning */
  margin-left: var(--loading-size);

  /* Initially set zero until aria-busy becomes true */
  opacity: 0%;
}

.loader,
.loader::before,
.loader::after {
  width: calc(var(--loading-size) / 2);
  height: calc(var(--loading-size) / 2);
  border-radius: var(--fluid-6);
  background-color: var(--loading-color);
}

/* SMALL */
.loader-small,
.loader-small::before,
.loader-small::after {
  width: calc(var(--loading-size-small) / 2);
  height: calc(var(--loading-size-small) / 2);
}

/* LARGE */
.loader-large,
.loader-large::before,
.loader-large::after {
  width: calc(var(--loading-size-large) / 2);
  height: calc(var(--loading-size-large) / 2);
  border-radius: var(--fluid-8);
}

.loader::before,
.loader::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  animation: blink 1s infinite;
}

.loader::before {
  left: calc(-1 * var(--loading-size));
  animation-delay: 0s;
}

.loader::after {
  left: var(--loading-size);
  animation-delay: 500ms;
}

/* SMALL */
.loader-small::before {
  left: calc(-1 * var(--loading-size-small));
}

.loader-small::after {
  left: var(--loading-size-small);
}

/* LARGE */
.loader-large::before {
  left: calc(-1 * var(--loading-size-large));
  animation-delay: 0s;
}

.loader-large::after {
  left: var(--loading-size-large);
}

/**
 * Setting aria-busy to true results in corresponding opacity change to visually show spinner.
 */
.loader[aria-busy="true"] {
  opacity: 100%;
}

@keyframes blink {
  50% {
    background-color: transparent;
  }
}

@media (prefers-reduced-motion), (update: slow) {
  .loader,
  .loader::before,
  .loader::after {
    transition-duration: 0.001ms !important;
  }
}

.spinner {
  --spinner-color: var(--agnostic-spinner-color, var(--agnostic-dark));

  /**
   * Inspiration to utilize grid for this from
   * https://dockyard.com/blog/2020/03/02/accessible-loading-indicatorswith-no-extra-elements
   */
  display: grid;
  grid-template: "content" 100% / auto;
  place-items: center;
  box-sizing: border-box;
}

.spinner::before,
.spinner::after {
  grid-area: content;
  width: var(--fluid-32);
  height: var(--fluid-32);
  content: "";
  display: block;
  border-radius: 50%;
  border-width: 3px;
  border-style: solid;
}

.spinner-small::before,
.spinner-small::after {
  width: var(--fluid-24);
  height: var(--fluid-24);
  border-width: var(--fluid-2);
}

.spinner-large::before,
.spinner-large::after {
  width: var(--fluid-40);
  height: var(--fluid-40);
  border-width: var(--fluid-4);
}

.spinner-xlarge::before,
.spinner-xlarge::after {
  width: var(--fluid-56);
  height: var(--fluid-56);
  border-width: var(--fluid-6);
}

/**
 * Before is the muted background
 */
.spinner::before {
  opacity: 0%;
  border-color: var(--spinner-color);
}

/**
 * After is the inner "snake"
 */
.spinner::after {
  opacity: 0%;
  border-color: transparent var(--spinner-color) transparent transparent;
  transition: opacity 0.1s;
  pointer-events: none;
  animation: loading-circle 1s ease-in-out infinite;

  /* TODO Research the whole null transform hack. It is quite confusing to figure out if it
  is beneficial or detrimental: See
  https://newbedev.com/css-keyframe-animation-cpu-usage-is-high-should-it-be-this-way
  transform: translateZ(0);
  will-change: transform; */
}

/**
 * Setting aria-busy to true results in corresponding opacity change to visually show spinner.
 */
.spinner[aria-busy="true"]::before {
  opacity: 12%;
}

.spinner[aria-busy="true"]::after {
  opacity: 100%;
}

@keyframes loading-circle {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion), (update: slow) {
  .spinner::after {
    transition-duration: 0.001ms !important;
  }
}

.menu-item {
  --menu-item-background-color: var(--agnostic-menu-item-background-color, inherit);

  text-align: left;

  /* TODO -- can we compose some of this from the button styles? */
  border-color: var(--agnostic-btn-bgcolor, var(--agnostic-gray-light));
  border-style: solid;
  border-width: var(--agnostic-btn-border-size, 1px);
  font-size: inherit;

  /* this can be overriden, but it might mess with the balance of the button heights across variants */
  line-height: var(--agnostic-line-height, var(--fluid-20, 1.25rem));
  padding-block-start: var(--agnostic-vertical-pad, 0.5rem);
  padding-block-end: var(--agnostic-vertical-pad, 0.5rem);
  padding-inline-start: var(--agnostic-side-padding, 0.75rem);
  padding-inline-end: var(--agnostic-side-padding, 0.75rem);
  background-color: var(--menu-item-background-color);
  display: block;
  min-width: 100%;
  white-space: nowrap;
  cursor: default;
}

.menu-item[disabled] {
  background: var(--agnostic-input-disabled-bg, var(--agnostic-disabled-bg)) !important;
  color: var(--agnostic-input-disabled-color, var(--agnostic-disabled-color)) !important;
  cursor: not-allowed !important;
  opacity: 80% !important;
}

.menu-item:focus {
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);

  /* Needed for High Contrast mode */
  outline:
    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
    var(--agnostic-focus-ring-outline-color);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;

  /* In order for the focused element's box-shadow to appear above its siblings we need to
  establish a new stacking context: https://stackoverflow.com/a/28042700 */
  isolation: isolate;
}

.menu-item:not(:first-of-type) {
  border-top: 0;
}

.menu-item-selected {
  color: var(--agnostic-light);
  background-color: var(--agnostic-primary);
  border-color: var(--agnostic-primary);
}

.menu-item:active:not(.menu-item-selected) {
  color: var(--agnostic-primary);
}

.menu-item [aria-checked="true"]::before {
  /* TODO make this more flexible eventually */
  content: "\2713\0020";
}

/* Sizes */
.menu-item-large {
  font-size: calc(var(--agnostic-btn-font-size, 1rem) + 0.25rem);
  height: 3rem;
  line-height: 2rem;
}

.menu-item-small {
  font-size: calc(var(--agnostic-btn-font-size, 1rem) - 0.25rem);
  height: 2rem;
  line-height: 1rem;
}

.menu-item-rounded:first-of-type {
  border-top-left-radius: var(--agnostic-radius);
  border-top-right-radius: var(--agnostic-radius);
}

.menu-item-rounded:last-of-type {
  border-bottom-left-radius: var(--agnostic-radius);
  border-bottom-right-radius: var(--agnostic-radius);
}

.menu-item:hover:not([disabled]):not(.menu-item-selected) {
  background-color: var(--agnostic-gray-extra-light);
  cursor: pointer;
}

:is(.btn-kebab, .btn-meatball) {
  justify-content: space-around;
  height: var(--fluid-24);
  width: var(--fluid-24);

  /* Rest here is supplied by btn-base and btn-blank */
}

/* We use btn-blank which doesn't include this :( */
:is(.btn-hamburger:focus, .btn-kebab:focus, .btn-meatball:focus) {
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);
  outline:
    var(--agnostic-focus-ring-outline-width)
    var(--agnostic-focus-ring-outline-style)
    var(--agnostic-focus-ring-outline-color);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;
}

.btn-hamburger,
.btn-kebab {
  flex-direction: column;
}

.btn-meatball {
  flex-direction: row;
}

/* stylelint-disable-next-line no-duplicate-selectors */
.btn-meatball {
  --block-padding: var(--agnostic-side-padding);

  padding-block-start: var(--block-padding);
  padding-block-end: var(--block-padding);
  padding-inline-start: 0;
  padding-inline-end: 0;
}

.btn-hamburger {
  --vertical-padding: 3px;

  padding-block-start: var(--vertical-padding);
  padding-block-end: var(--vertical-padding);
  padding-inline-end: var(--fluid-2);
  padding-inline-start: var(--fluid-2);
}

.dot,
.bar {
  background-color: var(--agnostic-dark);
}

.dot {
  width: 5px;
  height: 5px;
  border-radius: 50px;
}

.bar {
  width: var(--fluid-20);
  height: var(--fluid-2);
  margin: var(--fluid-2) 0;
}

.menu-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
  background-color: var(--agnostic-btn-bgcolor, var(--agnostic-gray-light));
  cursor: pointer;
  text-align: left;

  /* TODO -- can we compose some of this from the button styles? */
  border-color: var(--agnostic-btn-bgcolor, var(--agnostic-gray-light));
  border-style: solid;
  border-width: var(--agnostic-btn-border-size, 1px);
  font-size: inherit;

  /* this can be overriden, but it might mess with the balance of the button heights across variants */
  line-height: var(--agnostic-line-height, var(--fluid-20, 1.25rem));
  padding-block-start: var(--agnostic-vertical-pad, 0.5rem);
  padding-block-end: var(--agnostic-vertical-pad, 0.5rem);
  padding-inline-start: var(--agnostic-side-padding, 0.75rem);
  padding-inline-end: var(--agnostic-side-padding, 0.75rem);
}

.menu-trigger[disabled] {
  background: var(--agnostic-input-disabled-bg, var(--agnostic-disabled-bg)) !important;
  color: var(--agnostic-input-disabled-color, var(--agnostic-disabled-color)) !important;
  cursor: not-allowed !important;
  opacity: 80% !important;
}

.menu-trigger:focus {
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);

  /* Needed for High Contrast mode */
  outline:
    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
    var(--agnostic-focus-ring-outline-color);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;

  /* In order for the focused element's box-shadow to appear above its siblings we need to
  establish a new stacking context: https://stackoverflow.com/a/28042700 */
  isolation: isolate;
}

/* Sizes */
.menu-trigger-large {
  font-size: calc(var(--agnostic-btn-font-size, 1rem) + 0.25rem);
  height: 3rem;
  line-height: 2rem;
}

.menu-trigger-small {
  font-size: calc(var(--agnostic-btn-font-size, 1rem) - 0.25rem);
  height: 2rem;
  line-height: 1rem;
}

.menu-trigger-bordered {
  --menu-item-background-color: var(--agnostic-menu-item-background-color, inherit);

  background-color: var(--menu-item-background-color);
}

.menu-trigger-rounded {
  border-radius: var(--agnostic-radius);
}

/* TODO make this more flexible eventually */
.menu-icon {
  font-family: sans-serif;
  font-size: var(--fluid-18);
  margin-inline-start: var(--fluid-8);
  line-height: 1;
}

.menu {
  display: inline-flex;
  position: relative;
  background-color: inherit;
}

:is(.menu-items, .menu-items-right) {
  position: absolute;
  background-color: var(--agnostic-light);
  margin-block-start: var(--fluid-6);
  z-index: 10;
}

.menu-items {
  right: initial;
  left: 0;
}

.menu-items-right {
  left: initial;
  right: 0;
}

.pagination-container {
  display: flex;
}

.pagination {
  display: flex;
  list-style: none;
}

.pagination-item {
  padding-inline-start: var(--fluid-2);
  padding-inline-end: var(--fluid-2);
}

.pagination-button {
  --agnostic-pagination-button-color: var(--agnostic-primary);

  color: var(--agnostic-pagination-button-color);
  display: inline-block;
  line-height: var(--fluid-20);
  padding-inline-start: var(--fluid-12);
  padding-inline-end: var(--fluid-12);
  padding-block-start: var(--fluid-6);
  padding-block-end: var(--fluid-6);
  border-radius: var(--agnostic-radius);

  /* We need a border set on both hovered and unhovered so it does not jump around */
  border: 1px solid transparent;
  background-color: transparent;
}

.pagination-button:focus {
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);

  /* Needed for High Contrast mode */
  outline:
    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
    var(--agnostic-focus-ring-outline-color);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;
}

@media (prefers-reduced-motion), (update: slow) {
  .pagination-button:focus {
    transition-duration: 0.001ms !important;
  }
}

.pagination-item-disabled {
  cursor: not-allowed;
}

.pagination-button:disabled,
.pagination-item-disabled .pagination-button {
  color: var(--agnostic-pagination-disabled-bg, var(--agnostic-gray-mid-dark));
  opacity: 80%;
  pointer-events: none;
}

.pagination-item-active .pagination-button {
  background-color: var(--agnostic-primary);
  color: var(--agnostic-light);
}

.pagination-bordered .pagination-item-active .pagination-button {
  background-color: unset;
  border: 1px solid var(--agnostic-primary);
  color: var(--agnostic-primary);
}

.pagination-item:hover .pagination-button {
  text-decoration: none;
}

.pagination-item:not(.pagination-item-active):not(.pagination-item-disabled):hover .pagination-button {
  background-color: var(--agnostic-gray-extra-light);
}

/* For ellipses like [1][2]...[3][4] */
.pagination-item-gap {
  transform: translateY(var(--fluid-6));
}

.pagination-center {
  justify-content: center;
}

.pagination-start {
  justify-content: flex-start;
}

.pagination-end {
  justify-content: flex-end;
}

/* https://stackoverflow.com/questions/45507970/how-can-i-change-the-color-of-a-progress-bar-value-in-html */

/**
 * Most examples show styling directly to the <progress> element itself. However,
 * my tests (chrome, ff, safari on mac mini 2020), showed it's perfectly possibly
 * to use a class selector instead. The reason I'd prefer that here, is that I can
 * then use CSS Modules composes against .progress (e.g. for React/Vue components)
 */
.progress {
  appearance: none;
  height: var(--agnostic-progress-height, var(--fluid-10, 0.625rem));
  width: 100%;
  border: none;

  /* Next couple of rules are required to be here for FF (but not chrome) */
  background-color: var(--agnostic-progress-background, var(--agnostic-gray-light, #ededed));
  border-radius: var(--agnostic-progress-radius, var(--fluid-10, 0.625rem));
}

.progress[value]::-webkit-progress-bar {
  /* In my tests chrome requires this whereas FF wants it on the progress {} rule */
  background-color: var(--agnostic-progress-background, var(--agnostic-gray-light, #ededed));
  border-radius: var(--agnostic-progress-radius, var(--fluid-10, 0.625rem));
}

.progress[value]::-webkit-progress-value {
  background-color: var(--agnostic-progress-fill-color, var(--agnostic-primary, #077acb));
  border-radius: var(--agnostic-progress-radius, var(--fluid-10, 0.625rem));
}

.progress[value]::-moz-progress-bar {
  background-color: var(--agnostic-progress-fill-color, var(--agnostic-primary, #077acb));
  border-radius: var(--agnostic-progress-radius, var(--fluid-10, 0.625rem));
}

.progress[value]::-ms-fill {
  background-color: var(--agnostic-progress-fill-color, var(--agnostic-primary, #077acb));
  border-radius: var(--agnostic-progress-radius, var(--fluid-10, 0.625rem));
}

.select,
.select-base {
  display: block;
  width: 100%;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-appearance: none;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -moz-appearance: none;
  appearance: none;
}

.select,
.select-skin {
  padding: var(--fluid-6) var(--fluid-32) var(--fluid-6) var(--fluid-12);
  -moz-padding-start: calc(var(--fluid-12) - 3px);
  font-size: var(--fluid-16);
  font-weight: 400;
  line-height: 1.5;
  color: var(--agnostic-dark);
  border: 1px solid var(--agnostic-select-border-color, var(--agnostic-gray-light));
  border-radius: var(--agnostic-radius);
  transition:
    border-color var(--agnostic-timing-fast) ease-in-out,
    box-shadow var(--agnostic-timing-fast) ease-in-out;
}

/* Only shows the down arrow SVG if in single mode */
.select:not([multiple]) {
  background-color: inherit;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333330' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--fluid-12) center;
  background-size: var(--fluid-16) var(--fluid-12);
}

.select:focus {
  border-color: var(--agnostic-focus-ring-color);
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);

  /* Needed for High Contrast mode */
  outline:
    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
    var(--agnostic-focus-ring-outline-color);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;
}

.select-base,
.select:disabled {
  background-color: var(--agnostic-disabled-bg);
}

.select-base,
.select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 var(--agnostic-dark);
}

@media (prefers-reduced-motion), (update: slow) {
  .select,
  .select-base,
  .select:focus {
    transition: none;
  }
}

.select-small {
  padding-top: var(--fluid-4);
  padding-bottom: var(--fluid-4);
  padding-left: var(--fluid-8);
  font-size: var(--fluid-14);
}

.select-large {
  padding-top: var(--fluid-8);
  padding-bottom: var(--fluid-8);
  padding-left: var(--fluid-16);
  font-size: var(--fluid-18);
}

/**
 * Switch
 *
 * This switch is inspired by Scott Ohara's checkbox switch:
 * https://scottaohara.github.io/a11y_styled_form_controls/src/checkbox--switch/
 */
.switch-container {
  display: block;

  /* TODO: Hopefully this doesn't become a problem but since we use absolute
  positioning extensively, we need some way to have adjacent spaced lines */
  min-height: 2.25rem;
  width: 100%;
  padding: 0.5rem;
  position: relative;
}

.switch-container:hover {
  cursor: pointer;
}

/* using the before/after pseudo elements of the span to create the "switch" */
.switch::before,
.switch::after {
  border: 1px solid var(--agnostic-gray-mid-dark);
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* styling specific to the knob of the switch */
.switch::after {
  background: #fff;
  border-radius: 100%;
  width: 1.4rem;
  height: 1.4rem;
  right: 1.4rem;
  transition: right var(--agnostic-timing-fast) ease-in-out;
}

/* styling specific to the knob "container" */
.switch::before {
  background: #eee;
  border-radius: 1.75rem;
  width: 2.75rem;
  height: 1.75rem;
  right: 0.25rem;
  transition: background var(--agnostic-timing-medium) ease-in-out;
}

/* Sizes */
.switch-small::after {
  width: 1.25rem;
  height: 1.25rem;
  right: 1.125rem;
}

.switch-small::before {
  width: 2.25rem;
  height: 1.5rem;
}

.switch-large::after {
  width: 1.65rem;
  height: 1.65rem;
  right: 1.65rem;
}

.switch-large::before {
  width: 3.25rem;
  height: 2rem;
}

.switch-border::before {
  border: 1px solid var(--agnostic-primary);
}

.switch-action.switch-border::before {
  border: 1px solid var(--agnostic-action);
}

/* Switch label on right */

/* We have to flip the positioning when the label is on the right of switch */
.switch-right .switch::before {
  right: initial;
  left: 0.25rem;
}

.switch-right .switch::after {
  right: initial;
  left: 1.4rem;
}

/* Switch sizes w/label on right -- I expect SMACSS so .switch .switch-small
classes should both exist so the right: initial was taken care of above :) */
.switch-right .switch-small::after {
  left: 1.125rem;
}

.switch-right .switch-large::after {
  left: 1.65rem;
}

/* ---- CHECKED STATE ----- */

/* change the position of the knob to indicate it has been checked */

.switch-input:checked + .switch-small::after {
  right: 0.425rem;
}

.switch-input:checked + .switch::after {
  right: 0.5em;
}

.switch-right .switch-label {
  position: absolute;
  right: 0;

  /* Flips transition target to left to preserve our smooth transitions */
  transition: left var(--agnostic-timing-fast) ease-in-out;
}

.switch-right .switch-input:checked + .switch::after {
  right: initial;
  left: 0.5em;
}

.switch-right .switch-input:checked + .switch-small::after {
  right: initial;
  left: 0.425rem;
}

/* From: https://scottaohara.github.io/a11y_styled_form_controls/src/checkbox--switch/
  hide the actual checkbox from view, but not from keyboards or ATs.
  Instead of standard visually hidden styling, instead set opacity to
  almost 0 (not zero for ChomeVox legacy bug), pointer-events none, and
  then set to full height/width of container element so that VO focus
  ring outlines the component, instead of a tiny box within the component
*/
.switch-input {
  margin: 0;
  opacity: 0.01%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.switch-input:focus + .switch::before {
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);
}

/* update the color of the "container" to further visually indicate state */
.switch-input:checked + .switch:not(.switch-border)::before {
  background: var(--agnostic-primary);
}

.switch-input:checked + .switch-action:not(.switch-border)::before {
  background: var(--agnostic-action);
}

/* Border switch on checked the thumb gets primary or action bg respectively */
.switch-input:checked + .switch-border::after {
  background: var(--agnostic-primary);
}

.switch-input:checked + .switch-action.switch-border::after {
  background: var(--agnostic-action);
}

/* Disabled aka :disabled is not actually supported for <label>
element so we use attribute selector for that:
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled#:~:text=The%20disabled%20attribute%20is%20supported,control%20or%20its%20descendant%20controls.
*/
.switch-input[disabled] + .switch,
.switch-input[disabled] + .switch-label,
.switch-container.disabled {
  color: var(--agnostic-input-disabled-color, var(--agnostic-disabled-color)) !important;
  appearance: none !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 80% !important;
}

@media screen and (-ms-high-contrast: active) {
  .switch::after {
    background-color: windowText;
  }

  /* High contrast mode outline hacks */
  .switch-input[disabled] + .switch-label,
  .switch-container.disabled {
    outline: 2px solid transparent;
    outline-offset: -2px;
  }
}

@media (prefers-reduced-motion), (update: slow) {
  .switch::after,
  .switch::before {
    transition-duration: 0.001ms !important;
  }
}

.table {
  --table-bg: transparent;
  --table-accent-bg: transparent;
  --table-striped-color: var(--agnostic-dark);
  --table-striped-bg: rgb(0 0 0 / 2.5%);
  --table-active-color: var(--agnostic-dark);
  --table-active-bg: rgb(0 0 0 / 1.5%);
  --table-hoverable-color: var(--agnostic-dark);
  --table-hoverable-bg: var(--agnostic-table-hover-bg, #f1faff);

  width: 100%;
  margin-bottom: var(--fluid-16);
  color: var(--agnostic-dark);
  vertical-align: top;
  border-color: var(--agnostic-table-border-color, var(--agnostic-gray-light));
}

.table > :not(caption) > * > * {
  padding: var(--fluid-8) var(--fluid-8);
  background-color: var(--table-bg);
  border-bottom-width: 1px;

  /* 4th is spread --table-accent-bg will gets reset for active, hover, striped */
  box-shadow: inset 0 0 0 9999px var(--table-accent-bg);
}

.table > tbody {
  vertical-align: inherit;
}

.table > thead {
  vertical-align: bottom;
}

.table thead th {
  font-weight: 600;
}

.table-caps thead th {
  font-size: var(--fluid-12);
  text-transform: uppercase;
}

.table tbody td,
.table tbody th {
  font-weight: 400;
}

.table > :not(thead):not(caption) {
  border-top: var(--fluid-2) solid var(--agnostic-gray-light);
}

.caption-top {
  caption-side: top;
}

.caption-bottom {
  caption-side: bottom;
}

.caption-bottom,
.caption-top {
  padding-block-start: var(--fluid-12);
  padding-block-end: var(--fluid-12);

  /* Takes writing mode into account -- (mdn) same as left if direction is left-to-right
  and right if direction is right-to-left */
  text-align: start;
}

.caption-end {
  text-align: end;
}

.table-small > :not(caption) > * > * {
  padding: var(--fluid-4) var(--fluid-4);
}

.table-large > :not(caption) > * > * {
  padding: var(--fluid-12) var(--fluid-12);
}

.table-xlarge > :not(caption) > * > * {
  padding: var(--fluid-18) var(--fluid-18);
}

.table-bordered > :not(caption) > * {
  border-width: 1px 0;
}

.table-bordered > :not(caption) > * > * {
  border-width: 0 1px;
}

.table-borderless > :not(caption) > * > * {
  border-bottom-width: 0;
}

.table-borderless > :not(:first-child) {
  border-top-width: 0;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --table-accent-bg: var(--table-striped-bg);

  color: var(--table-striped-color);
}

.table-active {
  --table-accent-bg: var(--table-active-bg);

  color: var(--table-active-color);
}

.table-hoverable > tbody > tr:hover > * {
  --table-accent-bg: var(--table-hoverable-bg);

  color: var(--table-hoverable-color);
}

/* Stacked tables */
.table-stacked thead {
  display: none;
}

.table-stacked tr,
.table-stacked tbody th,
.table-stacked tbody td {
  display: block;
  width: 100%;
}

.table-stacked tbody th,
.table-stacked tbody td {
  border-bottom-width: 0;
}

.table-stacked td[data-label] {
  padding-bottom: var(--fluid-12);
}

.table-stacked tr {
  border-bottom: var(--fluid-2) solid var(--agnostic-gray-light);
  border-top-width: 0;
}

.table-stacked th[data-label]::before,
.table-stacked td[data-label]::before {
  content: attr(data-label);
  display: block;
  font-weight: 600;
  margin: -0.5rem -1rem 0;
  padding: var(--fluid-12) var(--fluid-16) var(--fluid-6);
}

.table-stacked tr th:first-child,
.table-stacked tr td:first-child {
  border-top-width: 0;
}

.table-stacked tr:nth-child(odd) td,
.table-stacked tr:nth-child(odd) th {
  background-color: inherit;
}

.table-stacked tr:first-child th:first-child,
.table-stacked tr:first-child td:first-child {
  border-top: var(--fluid-2) solid var(--agnostic-gray-light);
}

.table-stacked th[data-label],
.table-stacked td[data-label] {
  padding-bottom: var(--fluid-12);
}

/* As soon as there's not enough width, it will kick in horizontal scrolling */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Table is responsive only "up to" the breakpoint. Above it will not scroll */
@media (max-width: 576px) {
  .table-responsive-small {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 768px) {
  .table-responsive-medium {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 992px) {
  .table-responsive-large {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 1200px) {
  .table-responsive-xlarge {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.table-header-container {
  display: flex;
  align-items: center;
}

.table-sort-label {
  flex: 1;
  padding-inline-end: 0.5rem;
  text-align: left;
}

.table-sort {
  flex: 0 1 var(--fluid-48);
  background-color: transparent;
  border-color: transparent;
  border-width: 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding-block-start: var(--fluid-2);
  padding-block-end: var(--fluid-2);
}

.icon-sort {
  width: 1.125rem;
  height: 1.125rem;
}

.table-sort:focus {
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);

  /* Needed for High Contrast mode */
  outline:
    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
    var(--agnostic-focus-ring-outline-color);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;
}

@media (prefers-reduced-motion), (update: slow) {
  .table-sort:focus {
    transition-duration: 0.001ms !important;
  }
}

/* TODO -- should we use these for .nav? */
.tabs {
  display: flex;
  flex-direction: column;
}

.tabs-vertical {
  flex-direction: row;
}

.tab-list,
.tab-list-base {
  display: flex;
  flex-flow: row wrap;
  flex: 0 0 auto;
}

.tab-list,
.tab-skinned {
  padding-inline-start: 0;
  margin-block-end: 0;
  border-bottom:
    var(--agnostic-tabs-border-size, 1px) solid
    var(--agnostic-tabs-bgcolor, var(--agnostic-gray-light));
  transition-property: all;
  transition-duration: var(--agnostic-timing-medium);
}

/* In vertical orientation we want our tab buttons to stack */
.tabs-vertical .tab-list,
.tabs-vertical .tab-base {
  flex-direction: column;
  border: none;
}

/* We can ask for .tab-button which is base and skin combined, or, we can utilize .tab-button-base
if we'd like to only blank out buttons but otherwise skin ourselves. */
.tab-button,
.tab-button-base {
  /* Blank out the button */
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;

  /* This fixes issue where upon focus, the a11y focus ring's box shadow would get tucked beneat
  adjacent tab buttons; relative creates new stacking context https://stackoverflow.com/a/31276836 */
  position: relative;

  /* Reset margins/padding; this will get added back if it's a "skinned" tab button. However, we have
  a use case where a tab-button is wrapping a faux button. For that, we don't want margins/padding because
  the faux button provides that. */
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-block-start: 0;
  padding-block-end: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
}

.tab-button,
.tab-button-skin {
  display: block;

  /* Since this is a "skinned tab button" we add our padding here to previously "reset" .tab-button-base */
  padding-block-start: var(--agnostic-vertical-pad, 0.5rem);
  padding-block-end: var(--agnostic-vertical-pad, 0.5rem);
  padding-inline-start: var(--agnostic-side-padding, 0.75rem);
  padding-inline-end: var(--agnostic-side-padding, 0.75rem);
  font-family: var(--agnostic-btn-font-family, var(--agnostic-font-family-body));
  font-weight: var(--agnostic-btn-font-weight, 400);
  font-size: var(--agnostic-btn-font-size, 1rem);

  /* this can be overriden, but it might mess with the balance of the button heights across variants */
  line-height: var(--agnostic-line-height, var(--fluid-20, 1.25rem));
  color: var(--agnostic-tabs-primary, var(--agnostic-primary));
  text-decoration: none;
  transition:
    color var(--agnostic-timing-fast) ease-in-out,
    background-color var(--agnostic-timing-fast) ease-in-out,
    border-color var(--agnostic-timing-fast) ease-in-out;
}

/* We pull back the 2nd subsequent tabs to remove the double border */
.tab-button:not(:first-of-type),
.tab-button-base:not(:first-of-type) {
  margin-inline-start: -1px;
}

.tab-borderless {
  border: none !important;
}

.tab-button-large {
  padding-block-start: calc(var(--agnostic-input-side-padding) * 1.25);
  padding-block-end: calc(var(--agnostic-input-side-padding) * 1.25);
  padding-inline-start: calc(var(--agnostic-input-side-padding) * 1.75);
  padding-inline-end: calc(var(--agnostic-input-side-padding) * 1.75);
}

.tab-button-xlarge {
  padding-block-start: calc(var(--agnostic-input-side-padding) * 2);
  padding-block-end: calc(var(--agnostic-input-side-padding) * 2);
  padding-inline-start: calc(var(--agnostic-input-side-padding) * 3);
  padding-inline-end: calc(var(--agnostic-input-side-padding) * 3);
}

.tab-item.tab-button {
  margin-block-end: -1px;
  background: 0 0;
  border: 1px solid transparent;
  border-top-left-radius: var(--agnostic-tabs-radius, 0.25rem);
  border-top-right-radius: var(--agnostic-tabs-radius, 0.25rem);
}

.tab-item.tab-button.active {
  color: var(--agnostic-dark);
  background-color: var(--agnostic-light);
  border-color: var(--agnostic-gray-light) var(--agnostic-gray-light) var(--agnostic-light);
}

.tab-item:hover,
.tab-button:focus {
  border-color:
    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-width)
    var(--agnostic-gray-light);
  isolation: isolate;
  z-index: 1;
  cursor: pointer;
}

.tabs-vertical .tab-button {
  border: none;
}

.tab-button:disabled {
  color: var(--agnostic-tabs-disabled-bg, var(--agnostic-gray-mid-dark));
  background-color: transparent;
  border-color: transparent;
  opacity: 80%;
}

/**
 * Elects to additively use the AgnosticUI custom focus ring alongside the border
 * we already add above. It just makes things look more consistent across components.
 * For example, when we tab into the panels and links within.
 */
.tab-button-base:focus,
.tab-panel:focus,
.tab-button:focus {
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);

  /* Needed for High Contrast mode */
  outline:
    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
    var(--agnostic-focus-ring-outline-color);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;
}

@media (prefers-reduced-motion), (update: slow) {
  .tab-button,
  .tab-button-base:focus,
  .tab-button:focus,
  .tab-panel:focus,
  .tab-list,
  .tab-skinned {
    transition-duration: 0.001ms !important;
  }
}

.tag-base,
.tag {
  display: inline-flex;
  justify-content: center;
  white-space: nowrap;
}

.tag-skin,
.tag {
  background-color: var(--agnostic-gray-light);
  color: var(--agnostic-dark);
  font-size: var(--fluid-12);
  line-height: var(--agnostic-line-height, var(--fluid-20, 1.25rem));
  padding-block-start: var(--fluid-2);
  padding-block-end: var(--fluid-2);
  padding-inline-start: var(--fluid-8);
  padding-inline-end: var(--fluid-8);
}

.tag-info {
  background: var(--agnostic-primary-light);
  color: var(--agnostic-primary-dark);
}

.tag-warning {
  background: var(--agnostic-warning-light);
  color: var(--agnostic-warning-dark);
}

.tag-error {
  background: var(--agnostic-error-light);
  color: var(--agnostic-error-dark);
}

.tag-success {
  background: var(--agnostic-action-light);
  color: var(--agnostic-action-dark);
}

.tag-upper {
  font-size: var(--fluid-10);
  text-transform: uppercase;
}

.tag-circle {
  border-radius: 50%;
}

.tag-round {
  border-radius: var(--agnostic-radius);
}

.tag-pill {
  border-radius: 200px;
}

.tooltip {
  display: none;
  position: absolute;
  background: var(--agnostic-dark);
  color: var(--agnostic-light);
  padding: var(--fluid-4) var(--fluid-8);
  border-radius: var(--fluid-4);
  pointer-events: none;
}

.tooltip-arrow {
  position: absolute;
  background: var(--agnostic-dark);
  width: var(--fluid-8);
  height: var(--fluid-8);
  transform: rotate(45deg);
}
