/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
.OptionList__option:hover::before, .OptionList__option:focus-within::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: var(--colorsSurfaceGrey, #eeeeee);
}

.OptionList {
  /* Set color on root of component. It can be overridden after the @include */
  color: var(--colorsTextDefault, #141414);
  /* Make sure font-family goes across entire component */
  font-family: "Nunito Sans", sans-serif;
}

/* Single Select */
.OptionList--single-select .Checkbox__box {
  display: none;
}

/* Single Option in Options */
.OptionList__option {
  padding-right: 16px;
  border-radius: 3px;
  line-height: normal;
  display: flex;
  position: relative;
  /* Center vertical alignment of OptionList Checkboxes */
}
.OptionList__option .Checkbox__label {
  font-size: 14px;
  font-weight: 400;
  width: 100%;
}
.OptionList__option .Checkbox__label::after {
  content: "";
  position: absolute;
  inset: -8px -16px;
  z-index: -1;
}
.OptionList__option .a-Checkbox {
  width: 100%;
}
.OptionList__option .Checkbox__html-label {
  align-items: center;
  padding: 8px 0;
}
.OptionList__option .Checkbox__box {
  top: 0;
}
.OptionList__option.OptionList__option--collapsible .Checkbox__label::after {
  inset: -8px -16px -8px 0;
}

.OptionList__header {
  line-height: normal;
  padding-bottom: 8px;
  padding-left: 16px;
}

.OptionList--single-select .OptionList__option--selected {
  background-color: var(--colorsHoverPrimary, rgba(2, 101, 220, 0.1));
}
.OptionList--single-select .OptionList__option--selected .Checkbox__label {
  color: var(--colorsTextPrimary, #0265dc);
}
.OptionList--single-select .OptionList__option--selected:hover::before, .OptionList--single-select .OptionList__option--selected:focus-within::before {
  background-color: var(--colorsHoverPrimary, rgba(2, 101, 220, 0.1));
}

/* Produces padding equal to the depth of the option. 8 is an arbitrary stopping point */
[aria-level="1"].OptionList__option {
  padding-left: 16px;
}

[aria-level="2"].OptionList__option {
  padding-left: 36px;
}

[aria-level="3"].OptionList__option {
  padding-left: 52px;
}

[aria-level="4"].OptionList__option {
  padding-left: 68px;
}

[aria-level="5"].OptionList__option {
  padding-left: 84px;
}

[aria-level="6"].OptionList__option {
  padding-left: 100px;
}

[aria-level="7"].OptionList__option {
  padding-left: 116px;
}

[aria-level="8"].OptionList__option {
  padding-left: 132px;
}

/* Button styling of expand/collapse next to option */
.OptionList__collapse {
  padding: 0 !important;
  align-self: center;
  margin-left: -24px;
  margin-right: 4px;
}

/* Loading option style */
.OptionList__spinner {
  align-self: center;
  margin-left: -24px;
  margin-right: 5px;
}

/* Center vertical alignment of Checkboxes for custom content */
.OptionList__option--custom .Checkbox__html-label {
  align-items: center;
}
.OptionList__option--custom .Checkbox__box {
  top: 0;
}

/* Secondary actions. Shown only on hover. */
.OptionList__option--secondary-action {
  align-self: center;
  margin-right: -8px;
  display: flex;
  align-items: center;
  padding-left: 8px;
}

/*
	Read only variation
	Does not allow for selections, visually not disabled, allows for secondary actions
*/
.OptionList__option--read-only:hover, .OptionList__option--read-only:focus-within,
.OptionList__option--read-only .OptionList__option--secondary-action {
  background: none;
}
.OptionList__option--read-only:hover::before, .OptionList__option--read-only:focus-within::before,
.OptionList__option--read-only .OptionList__option--secondary-action::before {
  background-color: transparent;
}
.OptionList__option--read-only .Checkbox__html-label {
  cursor: default;
}

/*
	Disabled variation
	Inherits read only styles, adds visual to indicate it is disabled
*/
.OptionList__option--disabled .Checkbox__html-label {
  cursor: not-allowed;
}

/*# sourceMappingURL=OptionList.css.map */