@import './layout.scss';

:root {
  --grit-field-border-radius: 4px;
  --grit-field-control-border-radius: 4px;
  --grit-field-control-background: var(--neutral200);
  --grit-field-control-border: 1px solid var(--neutral800);
  --grit-field-control-focus-border: 1px solid var(--blue500);
  --grit-field-control-error-border: 1px solid var(--red500);
  --grit-field-control-disabled-color: var(--neutral600);
  --grit-field-control-error-color: var(--red500);
  --grit-field-control-color: var(--neutral1000);
  --grit-field-control-letter-spacing: var(--letter-spacing-body);
  --grit-field-control-font-size: var(--grit-font-size-1);
  --grit-field-control-font-weight: 500;
  --grit-field-control-height: 48px;
  --grit-field-control-hover-background: var(--blue200);
  --grit-field-control-hover-border: 1px solid var(--neutral900);
  --grit-field-control-input-outline: none;
  --grit-field-control-input-padding: 16px;
  --grit-field-control-label-active-scale: 0.85;
  --grit-field-control-label-top: 15px;
  --grit-field-control-label-left: 0px;
  --grit-field-control-label-active-translate: -14px;
  --grit-field-control-label-font-weight: 600;
  --grit-field-control-label-color: var(--neutral800);
  --grit-field-control-label-font-family: var(--grit-font-family-header);
  --grit-field-control-label-font-size: var(--grit-font-size-1);
  --grit-field-control-margin: 0px 16px;
  --grit-field-control-selected-color: var(--blue500);
  --grit-field-font-family: var(--grit-font-family-body);
  --grit-field-transition: all var(--transition-duration-150)
    var(--transition-curve-standard);
  --grit-field-control-label-focus-color: var(--blue500);
  --grit-field-control-label-hover-color: var(--neutral900);
  --grit-field-control-label-error-color: var(--red500);
  --grit-field-control-prefix-padding: 8px 16px 8px 16px;

  --grit-field-message-font-family: var(--grit-font-family-body);
  --grit-field-message-font-size: var(--grit-font-size-0);
  --grit-field-message-color: var(--neutral800);
  --grit-field-message-active-hint-color: var(--blue500);
  --grit-field-message-active-error-color: var(--red500);
  --grit-field-message-letter-spacing: var(--letter-spacing-body);
  --grit-field-message-line-height: 24px;
  --grit-field-message-max-height-transition: max-height 100ms;
  --grit-field-message-show-more-color: var(--blue500);
  --grit-field-message-show-more-width: 69px;
  --grit-field-message-show-more-left-margin: 4px;
  --grit-field-message-show-more-top-margin: 4px;

  --grit-field-textarea-min-height: 80px;
  --grit-field-textarea-max-height: unset;

  --button-height-sm: 32px;
  --button-height-md: 48px;
  --button-height-lg: 64px;
  --button-padding-sm: 0px 16px;
  --button-disabled-opacity: 40%;
  --button-disabled-opacity-subtle: 60%;
  --grit-button-primary: var(--blue500);
  --grit-button-primary-hover: var(--blue600);
  --grit-button-primary-press: var(--blue700);
  --grit-button-primary-contrast: var(--neutral100);
  --grit-button-primary-contrast-hover: var(--neutral100);
  --grit-button-primary-contrast-press: var(--neutral100);
  --grit-button-primary-light: var(--blue500);
  --grit-button-primary-light-hover: var(--blue600);
  --grit-button-primary-light-press: var(--blue700);
  --grit-button-primary-disable-color: var(--blue300);
  --grit-button-primary-disable-border: var(--neutral500);
  --grit-button-primary-disable-background: var(--neutral100);
  --grit-button-subtle: var(--neutral300);
  --grit-button-subtle-hover: var(--neutral400);
  --grit-button-subtle-press: var(--neutral500);
  --grit-button-subtle-contrast: var(--neutral900);
  --grit-button-subtle-border: var(--neutral400);
  --grit-button-subtle-contrast-hover: var(--neutral900);
  --grit-button-subtle-contrast-press: var(--neutral900);
  --grit-button-subtle-disable-color: var(--neutral600);
  --grit-button-subtle-disable-border: var(--neutral400);
  --grit-button-subtle-disable-background: var(--neutral100);
  --grit-button-subtle-light: var(--neutral700);
  --grit-button-subtle-light-hover: var(--neutral700);
  --grit-button-subtle-light-press: var(--neutral700);
  --grit-button-success: var(--green500);
  --grit-button-success-hover: var(--green600);
  --grit-button-success-press: var(--green700);
  --grit-button-success-contrast: var(--neutral100);
  --grit-button-success-contrast-hover: var(--neutral100);
  --grit-button-success-contrast-press: var(--neutral100);
  --grit-button-success-disable-color: var(--green300);
  --grit-button-success-disable-border: var(--green300);
  --grit-button-success-disable-background: var(--green100);
  --grit-button-success-light: var(--green500);
  --grit-button-success-light-hover: var(--green600);
  --grit-button-success-light-press: var(--green700);
  --grit-button-destroy: var(--red500);
  --grit-button-destroy-hover: var(--red600);
  --grit-button-destroy-press: var(--red700);
  --grit-button-destroy-contrast: var(--neutral100);
  --grit-button-destroy-contrast-hover: var(--neutral100);
  --grit-button-destroy-contrast-press: var(--neutral100);
  --grit-button-destroy-disable-color: var(--red300);
  --grit-button-destroy-disable-border: var(--red300);
  --grit-button-destroy-disable-background: var(--red100);
  --grit-button-destroy-light: var(--red500);
  --grit-button-destroy-light-hover: var(--red600);
  --grit-button-destroy-light-press: var(--red700);
  --grit-button-light-background: var(--neutral00);
  --grit-button-light-background-hover: var(--neutral300);
  --grit-button-light-background-press: var(--neutral400);

  --grit-switch-width: 64px;
  --grit-switch-height: 32px;
  --grit-switch-thumb-height: 24px;
  --grit-switch-thumb-width: 24px;
  --grit-switch-thumb-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  --grit-switch-thumb-color: var(--neutral100);
  --grit-switch-disabled-thumb-box-shadow: 0 1px 2px 0 rgba(12, 10, 10, 0.1);
  --grit-switch-background-off: var(--neutral500);
  --grit-switch-background-on: var(--green400);
  --grit-switch-disabled-background-off: var(--neutral400);
  --grit-switch-disabled-background-on: var(--green200);
  --grit-switch-thumb-background: var(--neutral100);
  --grit-switch-disabled-thumb-background: var(--neutral100);
  --grit-switch-border-radius: 1000px;
  --grit-switch-thumb-border-radius: 1000px;
  --grit-switch-track-padding: 4px;
  --grit-switch-label-color: var(--neutral900);
  --grit-switch-label-font-family: var(--grit-font-family-header);
  --grit-switch-label-font-weight: 500;

  --grit-checkbox-transition-curve-check: var(--transition-curve-standard);
  --grit-checkbox-transition-curve-duration: var(--transition-duration-100);
  --grit-checkbox-check-transition-curve-duration: var(
    --transition-duration-150
  );
  --grit-checkbox-control-width: 16px;
  --grit-checkbox-control-height: 16px;
  --grit-checkbox-control-border-radius: 2px;
  --grit-checkbox-control-checked-color: var(--neutral100);
  --grit-checkbox-control-hover-background: var(--blue200);
  --grit-checkbox-check-width: 16px;
  --grit-checkbox-check-height: 16px;
  --grit-checkbox-check-color: var(--neutral100);
  --grit-checkbox-border-color: var(--blue500);
  --grit-checkbox-disabled-border-color: var(--neutral400);
  --grit-checkbox-disabled-background-color: var(--neutral500);
  --grit-checkbox-error-border-color: var(--red500);
  --grit-checkbox-error-background-color: var(--red500);
  --grit-checkbox-background-color: var(--blue500);
  --grit-checkbox-border-thickness: 1px;
  --grit-checkbox-label-color: var(--neutral900);
  --grit-checkbox-label-font-family: var(--grit-font-family-body);

  --grit-list-select-padding: 16px 24px;
  --grit-list-select-border-radius: 8px;
  --grit-list-select-margin-bottom: 16px;
  --grit-list-select-box-shadow: 0px 0px 1px 0px rgba(33, 43, 54, 0.16),
    0px 1px 1px 0px rgba(33, 43, 54, 0.16);
  --grit-list-select-background-color: var(--neutral100);
  --grit-list-select-background-color-selected: var(--blue500);
  --grit-list-select-color: var(--neutral00);
  --grit-list-select-transition-duration: var(--transition-duration-150);
  --grit-list-select-transition-selected: var(--transition-curve-standard);
  --grit-list-select-item-label-font-family: var(--grit-font-family-header);
  --grit-list-select-item-subtitle-font-family: var(--grit-font-family-body);
  --grit-list-select-item-label-font-size: var(--grit-font-size-1);
  --grit-list-select-item-label-font-weight: bold;
  --grit-list-select-item-label-line-height: 24px;
  --grit-list-select-item-label-letter-spacing: var(--letter-spacing-body);
  --grit-list-select-item-label-color: var(--neutral900);
  --grit-list-select-item-label-color-selected: var(--neutral100);
  --grit-list-select-item-icon-background: var(--neutral100);
  --grit-list-select-item-icon-color: var(--blue500);
  --grit-list-select-item-icon-width: 20px;
  --grit-list-select-item-icon-height: 20px;
  --grit-list-select-item-icon-border-radius: 1000px;
  --grit-list-select-item-icon-fill-background: var(--neutral500);
  --grit-list-select-item-icon-font-size: 18px;

  --grit-slider-main-wrapper-height: 78px;
  --grit-slider-main-wrapper-padding-bottom: 10px;
  --grit-slider-wrapper-width: calc(100% - 78px);
  --grit-slider-bar-filled-z-index: 3;
  --grit-slider-bar-filled-border-radius: 8px;
  --grit-slider-bar-filled-height: 8px;
  --grit-slider-bar-filled-background-color: var(--blue400);
  --grit-slider-bar-filled-top: calc((20px - 8px) / 2);
  --grit-slider-bar-nonfilled-top: calc((20px - 5px) / 2);
  --grit-slider-bar-nonfilled-border-radius: 5px;
  --grit-slider-bar-nonfilled-height: 5px;
  --grit-slider-bar-nonfilled-background-color: var(--neutral400);
  --grit-slider-bar-width: 100%;
  --grit-slider-thumb-width: 20px;
  --grit-slider-thumb-height: 20px;
  --grit-slider-thumb-background-color: var(--neutral00);
  --grit-slider-thumb-z-index: 4;
  --grit-slider-thumb-border-radius: 100%;
  --grit-slider-thumb-border: 0.5px solid var(--blue400);
  --grit-slider-thumb-label-container-top: -60px;
  --grit-slider-thumb-label-container-background: var(--blue400);
  --grit-slider-thumb-label-container-padding: 8px;
  --grit-slider-thumb-label-container-width: 108px;
  --grit-slider-thumb-label-container-border-radius: 8px;
  --grit-slider-thumb-label-container-color: var(--neutral100);
  --grit-slider-thumb-label-container-after-border-top: 12px solid
    var(--blue400);
  --grit-slider-thumb-label-container-after-border-left: 10px solid transparent;
  --grit-slider-thumb-label-container-after-border-right: 10px solid transparent;
  --grit-slider-thumb-label-container-after-bottom: -6px;
  --grit-slider-thumb-label-container-after-left: 50%;
  --grit-slider-thumb-label-container-after-transform: rotate(180deg);
  --grit-slider-thumb-label-container-after-top: -30px;
  --grit-slider-thumb-label-container-after-top-inverted: 35px;
  --grit-slider-thumb-label-content-font-family: var(--grit-font-family-header);
  --grit-slider-thumb-label-content-font-size: var(--grit-font-size-0);
  --grit-slider-thumb-label-content-font-weight: 600;
  --grit-slider-thumb-label-content-line-height: 1.5em;
  --grit-slider-thumb-label-content-letter-spacing: 0.04em;
  --grit-slider-thumb-label-content-color: var(--neutral00);

  --grit-overlay-text-color: var(--neutral1000);
  --grit-overlay-max-height: 400px;
  --grit-overlay-modal-sm-max-height: 50%;
  --grit-overlay-bottom-sheet-sm-max-height: 85%;
  --grit-overlay-width: 400px;
  --grit-overlay-max-width: 600px;
  --grit-overlay-padding: 24px;
  --grit-overlay-side-sheet-padding: 32px;
  --grit-overlay-sheet-title-padding-bottom: 16px;
  --grit-overlay-modal-sm-margin: 16px;
  --grit-overlay-border-radius: 4px;
  --grit-overlay-close-button-padding: 4px;
  --grit-overlay-background: var(--neutral100);
  --grit-overlay-animation-duration: var(--transition-duration-200);
  --grit-overlay-backdrop-height: 100%;
  --grit-overlay-backdrop-width: 100vh;
  --grit-overlay-backdrop-transition: 100ms cubic-bezier(0.4, 0, 0.6, 1);
  --grit-overlay-modal-backdrop-background: rgba(33, 43, 54, 0.88);
  --grit-overlay-sheet-backdrop-background: rgba(33, 43, 54, 0.4);

  --grit-radio-transition-curve-check: var(--transition-curve-sharp);
  --grit-radio-transition-curve-duration: var(--transition-duration-150);
  --grit-radio-control-width: 24px;
  --grit-radio-control-height: 24px;
  --grit-radio-control-width-input: 20px;
  --grit-radio-control-height-input: 20px;
  --grit-radio-control-checked-width: 10px;
  --grit-radio-control-checked-height: 10px;
  --grit-radio-control-color-selected: var(--blue500);
  --grit-radio-control-color-unselected: var(--neutral600);
  --grit-radio-control-hover-background: var(--blue200);
  --grit-radio-control-circle-background-disabled: var(--neutral500);
  --grit-radio-control-circle-border-disabled: var(--neutral500);
  --grit-radio-control-circle-border-error: var(--red500);
  --grit-radio-label-font-family: var(--grit-font-family-body);
  --grit-radio-label-font-size: var(--grit-font-size-1);
  --grit-radio-label-color: var(--neutral900);
  --grit-radio-label-padding: 8px;
  --grit-radio-label-line-height: var(--line-height-body);
  --grit-radio-label-letter-spacing: var(--letter-spacing-header);
  --grit-radio-label-disabled: var(--neutral500);

  --grit-icon-color: var(--neutral900);
  --grit-icon-width: 24px;
  --grit-icon-height: 24px;
  --grit-icon-font-size: 24px;
  --grit-icon-font-family: 'Material Icons';

  --grit-badge-height: 20px;
  --grit-badge-padding: 4px 8px 4px 4px;
  --grit-badge-label-font-family: var(--grit-font-family-body);
  --grit-badge-label-font-size: 12px;
  --grit-badge-label-line-height: 1em;
  --grit-badge-icon-width: 12px;
  --grit-badge-icon-height: 12px;
  --grit-badge-icon-font-size: 12px;
  --grit-badge-icon-margin-right: 4px;
  --grit-badge-border-radius: 1000px;
  --grit-badge-default-background: var(--neutral300);
  --grit-badge-default-icon-color: var(--neutral700);
  --grit-badge-default-label-color: var(--neutral900);
  --grit-badge-info-background: var(--purple100);
  --grit-badge-info-icon-color: var(--purple500);
  --grit-badge-info-label-color: var(--neutral900);
  --grit-badge-primary-background: var(--blue100);
  --grit-badge-primary-icon-color: var(--blue500);
  --grit-badge-primary-label-color: var(--neutral900);
  --grit-badge-success-background: var(--green100);
  --grit-badge-success-icon-color: var(--green500);
  --grit-badge-success-label-color: var(--neutral900);
  --grit-badge-attention-strong-background: var(--orange100);
  --grit-badge-attention-strong-icon-color: var(--orange500);
  --grit-badge-attention-strong-label-color: var(--neutral900);
  --grit-badge-attention-background: var(--yellow100);
  --grit-badge-attention-icon-color: var(--yellow500);
  --grit-badge-attention-label-color: var(--neutral900);
  --grit-badge-warning-background: var(--red100);
  --grit-badge-warning-icon-color: var(--red500);
  --grit-badge-warning-label-color: var(--neutral900);

  --grit-message-group-font-size: var(--grit-font-size-0);
  --grit-message-group-font-weight: 500;
  --grit-message-group-font-family: var(--grit-font-family-body);
  --grit-message-group-line-height: 1.5em;
  --grit-message-group-hint-color: var(--blue500);
  --grit-message-group-error-color: var(--red500);
  --grit-message-group-neutral-color: var(--neutral800);
  --grit-message-group-message-transition-duration: 150ms;
  --grit-message-group-min-height: 21px;
  --grit-message-group-margin-top: 8px;

  --grit-spinner-width: 100%;

  --grit-card-border-radius: 4px;
  --grit-card-text-color: var(--neutral1000);
  --grit-expanded-card-top: 16px;
  --grit-expanded-card-left: 16px;
  --grit-notification-initial-opacity: 0.8;
  --grit-notification-title-font-size: 13.6px;
  --grit-notification-title-font-family: 'Montserrat', sans-serif;
  --grit-notification-body-font-size: 13.6px;
  --grit-notification-body-font-family: 'Lato', sans-serif;
  --grit-notification-flag-max-width: 400px;
  --grit-notification-flag-bottom: 8px;
  --grit-notification-flag-border-radius: 4px;
  --grit-notification-flag-border: 1px;
  --grit-notification-letter-spacing: var(--letter-spacing-body);
  --grit-notification-max-height: 0px;
  --grit-notification-transition: 0.2ms;
  --grit-notification-display-color: var(--neutral1000);
  --grit-notification-display-max-height: 500px;
  --grit-notification-display-background-color: var(--neutral100);
  --grit-notification-proximity-warning-background: var(--red100);
  --grit-notification-proximity-warning-border-color: var(--red200);
  --grit-notification-proximity-attention-background: var(--yellow100);
  --grit-notification-proximity-attention-border-color: var(--yellow200);
  --grit-notification-proximity-success-background: var(--green100);
  --grit-notification-proximity-success-border-color: var(--green200);
  --grit-notification-proximity-info-background: var(--neutral200);
  --grit-notification-proximity-info-border-color: var(--neutral300);
  --grit-notification-warning-bold-background: var(--red500);
  --grit-notification-warning-bold-color: var(--neutral100);
  --grit-notification-attention-bold-background: var(--yellow500);
  --grit-notification-attention-bold-color: var(--yellow800);
  --grit-notification-attention-bold-border-color: transparent;
  --grit-notification-success-bold-background: var(--green600);
  --grit-notification-success-bold-color: var(--neutral100);
  --grit-notification-info-bold-background: var(--neutral1000);
  --grit-notification-info-bold-color: var(--neutral100);
  --grit-notification-padding: 16px;
  --grit-notification-center-col-max-height: 500px;
  --grit-notification-center-col-padding: 16px 0px;
  --grit-notification-first-child-line-height: 1.2em;
  --grit-notification-first-child-padding-top: 8px;
  --grit-notification-first-child-margin-bottom: 8px;
  --grit-notification-second-child-line-height: 1.5em;
  --grit-notification-second-child-margin-top: 8px;
  --grit-notification-second-child-margin-bottom: 2px;
  --grit-notification-third-child-line-height: 1.2em;
  --grit-notification-action-icon-color: var(--yellow800);
  --grit-notification-action-icon-modifier-bold-color: var(--yellow800);
  --grit-notification-action-icon-modifier-bold-default-color: var(--yellow800);
  --grit-notification-action-icon-default-color: var(--yellow800);
  --grit-notification-action-icon-modifier-bold-attention-color: var(
    --yellow700
  );
  --grit-notification-action-icon-modifier-bold-info-color: var(--neutral100);
  --grit-notification-action-icon-modifier-bold-warning-color: var(
    --neutral100
  );
  --grit-notification-action-icon-modifier-bold-success-color: var(
    --neutral100
  );

  --grit-skeleton-gradient-start: #eeeeee;
  --grit-skeleton-gradient-end: #d7d6d6;

  --grit-top-nav-bar-background: var(--neutral100);
  --grit-top-nav-bar-padding-top: 16px;
  --grit-top-nav-bar-padding-right: 16px;
  --grit-top-nav-bar-padding-bottom: 16px;
  --grit-top-nav-bar-padding-left: 16px;
  --grit-top-nav-bar-height: 64px;
  --grit-top-nav-bar-content-justify: space-between;
  --grit-top-nav-bar-content-align: center;
  --grit-top-nav-bar-icon-color-transition: all var(--transition-duration-100)
    var(--transition-curve-standard);
  --grit-top-nav-bar-icon-color: var(--neutral600);
  --grit-top-nav-bar-icon-hover-color: var(--neutral600);
  --grit-top-nav-bar-icon-cursor: pointer;
  --grit-top-nav-bar-top: 0;
  --grit-top-nav-bar-right: 0;
  --grit-top-nav-bar-bottom: auto;
  --grit-top-nav-bar-left: 0;
  --grit-top-nav-bar-width: 100%;
  --grit-top-nav-bar-z-index: 50;

  --grit-chip-height: 32px;
  --grit-chip-border-radius: 4px;
  --grit-chip-font-size: var(--grit-font-size-0);
  --grit-chip-padding: 8px;
  --grit-chip-background: var(--blue100);
  --grit-chip-border-color: var(--blue300);
  --grit-chip-color: var(--neutral1000);

  --grit-message-list-label-font-family: var(--grit-font-family-body);
  --grit-message-list-label-color: var(--neutral900);
  --grit-checkbox-group-line-height: 1.62;

  --grit-accordion-label-container-margin: 0;
  --grit-accordion-label-container-button-width: 100%;
  --grit-accordion-label-container-button-border: none;
  --grit-accordion-label-container-button-background-color: transparent;
  --grit-accordion-label-container-button-focus-background-color: var(
    --neutral300
  );
  --grit-accordion-label-container-button-hover-background-color: var(
    --neutral300
  );
  --grit-accordion-label-container-padding: 14px 16px 14px 16px;
  --grit-accordion-label-container-font-weight: bold;
  --grit-accordion-label-container-cursor: pointer;
  --grit-accordion-label-color: var(--neutral900);
  --grit-accordion-label-font-size: var(--grit-font-size-1);
  --grit-accordion-label-font-family: var(--grit-font-family-body);
  --grit-accordion-label-letter-spacing: 0.28px;
  --grit-accordion-label-line-height: 20px;
  --grit-accordion-label-caret-container-border-radius: 0px;
  --grit-accordion-label-caret-container-height: 24px;
  --grit-accordion-label-caret-container-width: 24px;
  --grit-accordion-body-max-height: 0px;
  --grit-accordion-body-opacity: 0;
  --grit-accordion-body-transition: var(--transition-duration-150);
  --grit-accordion-body-open-opacity: 1;
  --grit-accordion-body-open-max-height: 1000px;
  --grit-accordion-body-animation-duration: 200ms;
  --grit-accordion-action-icon-color: var(--darkNeutral900);
  --grit-accordion-action-icon-transform: rotate(0deg);
  --grit-accordion-action-icon-transform-open: rotate(180deg);
  --grit-accordion-slotted-padding: 0px 16px 14px 16px;
  --grit-accordion-caret-border-width: 5px;
  --grit-accordion-caret-border-style: solid;
  --grit-accordion-caret-border-right: 5px solid transparent;
  --grit-accordion-caret-border-color: black transparent transparent;
  --grit-accordion-caret-width: 0;
  --grit-accordion-caret-height: 0;
  --grit-accordion-caret-transition: var(--transition-duration-150);

  --grit-skiplink-slotted-box-shadow: 0px 0px 1px rgba(33, 43, 54, 0.15);
  --grit-skiplink-slotted-font-size: 13px;
  --grit-skiplink-slotted-font-family: var(--grit-font-family-body);
  --grit-skiplink-slotted-color: #454f5b;
  --grit-skiplink-slotted-background: #ffffff;
  --grit-skiplink-slotted-border-color: #006aff;

  --grit-option-select-message-wrapper-color: var(--red500);
  --grit-option-select-message-wrapper-font-family: var(
    --grit-font-family-body
  );
  --grit-option-select-message-wrapper-font-size: var(--grit-font-size-0);
  --grit-option-select-message-wrapper-letter-spacing: var(
    --letter-spacing-body
  );
  --grit-option-select-message-wrapper-line-height: 24px;
  --grit-option-select-message-transition: all 300;
  --grit-option-select-message-error-transition: max-height 100ms;
  --grit-option-select-message-show-more-color: var(--blue500);
  --grit-option-select-message-show-more-min-width: 69px;
  --grit-option-select-message-show-more-margin-left: 4px;
  --grit-option-select-text: var(--neutral900);
  --grit-option-select-text-disabled: var(--neutral500);
  --grit-option-select-border: var(--neutral600);
  --grit-option-select-border-hover: var(--blue500);
  --grit-option-select-border-active: var(--blue500);
  --grit-option-select-border-disabled: var(--neutral500);
  --grit-option-select-background: var(--neutral100);
  --grit-option-select-background-hover: var(--blue100);
  --grit-option-select-background-active: var(--blue500);
  --grit-option-select-background-disabled: var(--neutral500);
  --grit-qr-code-element-padding: 8px 79px 48px 79px;
  --grit-qr-code-font-family: var(--grit-font-family-body);
  --grit-qr-code-title-font-size: var(--grit-font-size-1);
  --grit-qr-code-title-line-height: var(--line-height-body);
  --grit-qr-code-color: var(--neutral900);
  --grit-qr-code-title-letter-spacing: var(--grit-common-letter-spacing);
  --grit-qr-code-title-margin-left: 16px;
  --grit-qr-code-title-margin-top: 10px;
  --grit-qr-code-tutorial-title-front-size: var(--grit-font-size-0);
  --grit-qr-code-tutorial-title-height: var(--grit-common-line-height);
  --grit-qr-code-tutorial-title-letter-spacing: var(
    --grit-common-letter-spacing
  );

  --grit-qr-code-tutorial-steps-padding-top: 16px;
  --grit-qr-code-tutorial-steps-padding-bottom: 36px;
  --grit-qr-code-tutorial-step-img-height: 50px;
  --grit-qr-code-tutorial-step-img-width: 26px;
  --grit-qr-code-tutorial-step-p-margin-top: 8px;
  --grit-qr-code-tutorial-step-p-margin-bottom: 0px;
  --grit-qr-code-tutorial-step-p-font-size: var(--grit-font-size-0);
  --grit-qr-code-tutorial-step-p-line-height: 14px;
  --grit-qr-code-tutorial-step-p-letter-spacing: var(--letter-spacing-body);
  --grit-qr-code-tutorial-step-p-width: 84px;
  --grit-qr-code-tutorial-step-p-height: 44px;

  --grit-message-color: var(--neutral800);
  --grit-message-font-family: var(--grit-font-family-body);
  --grit-message-font-size: var(--grit-font-size-0);
  --grit-message-letter-spacing: var(--letter-spacing-body);
  --grit-message-line-height: 24px;
  --grit-message-transition: var(--transition-duration-150);
  --grit-message-wrapper-transition: max-height 100ms;
  --grit-message-show-more-color: var(--blue500);
  --grit-message-show-more-min-width: 69px;
  --grit-message-show-more-margin-left: 4px;
  --grit-autocomplete-border: 1px solid var(--neutral900);
  --grit-autocomplete-border-radius: var(--grit-field-border-radius);
  --grit-autocomplete-label-color: var(--grit-field-control-label-color);

  --grit-autocomplete-item-margin-left: 64px;
  --grit-autocomplete-item-padding: 16px;
  --grit-autocomplete-background-focus: var(--neutral200);

  --grit-button-icon-disable-icon-color: var(--neutral400);
  --grit-button-icon-primary-hover-color: var(--neutral300);
  --grit-button-icon-primary-active-color: var(--blue100);
  --grit-button-icon-secondary-color: var(--blue500);
}