.Title {
  margin-bottom: var(--x-spacing-tight1x);
}

.OptionList {
  color: var(--x-default-color-text);
}

.OptionList-backgroundTransparent {
  --option-list-inner-border-color: var(--x-default-color-border);
  --option-list-background-color: transparent;
}

.OptionList-backgroundSurfacePrimary {
  --x-default-color: var(--x-color-surface-primary);
  --x-default-color-subdued: var(--x-color-surface-primary-subdued);
  --x-default-color-text: var(--x-color-surface-primary-text);
  --x-default-color-text-subdued: var(--x-color-surface-primary-text-subdued);
  --x-default-color-text-emphasized: var(
    --x-color-surface-primary-text-emphasized
  );
  --x-default-color-accent: var(--x-color-surface-primary-accent);
  --x-default-color-disabled: var(--x-color-surface-primary-disabled);
  --option-list-inner-border-color: var(--x-color-surface-primary-border);
  --option-list-background-color: var(--x-color-surface-primary);
}

.OptionList-backgroundSurfaceSecondary {
  --x-default-color: var(--x-color-surface-secondary);
  --x-default-color-subdued: var(--x-color-surface-secondary-subdued);
  --x-default-color-text: var(--x-color-surface-secondary-text);
  --x-default-color-text-subdued: var(--x-color-surface-secondary-text-subdued);
  --x-default-color-text-emphasized: var(
    --x-color-surface-secondary-text-emphasized
  );
  --x-default-color-accent: var(--x-color-surface-secondary-accent);
  --x-default-color-disabled: var(--x-color-surface-secondary-disabled);
  --option-list-inner-border-color: var(--x-color-surface-secondary-border);
  --option-list-background-color: var(--x-color-surface-secondary);
}

.OptionList-backgroundSurfaceTertiary {
  --x-default-color: var(--x-color-surface-tertiary);
  --x-default-color-subdued: var(--x-color-surface-tertiary-subdued);
  --x-default-color-text: var(--x-color-surface-tertiary-text);
  --x-default-color-text-subdued: var(--x-color-surface-tertiary-text-subdued);
  --x-default-color-text-emphasized: var(
    --x-color-surface-tertiary-text-emphasized
  );
  --x-default-color-accent: var(--x-color-surface-tertiary-accent);
  --x-default-color-disabled: var(--x-color-surface-tertiary-disabled);
  --option-list-inner-border-color: var(--x-color-surface-tertiary-border);
  --option-list-background-color: var(--x-color-surface-tertiary);
}

.isContainer {
  border-radius: var(
    --x-option-list-border-radius,
    var(--x-control-border-radius, var(--x-global-border-radius))
  );

  & > * {
    --x-default-color-border: var(--option-list-inner-border-color);
  }
}

.OptionList-borderStyleBase {
  --option-list-border-style: solid;
}

.OptionList-borderStyleDotted {
  --option-list-border-style: dotted;
}

/* stylelint-disable selector-max-specificity, selector-max-class */
.OptionList-borderFull {
  &.isContainer {
    border: 1px var(--x-default-color-border) var(--option-list-border-style);

    & .Option:not(:first-child) {
      border-top: 1px var(--x-default-color-border)
        var(--option-list-border-style);
    }
  }

  & .Option.isContainer {
    border: 1px var(--x-default-color-border) var(--option-list-border-style);
  }

  & .Details {
    border-top: 1px var(--x-default-color-border)
      var(--option-list-border-style);
  }
}

.OptionList-borderInner {
  &.isContainer {
    & .Option:not(:first-child) {
      border-top: 1px var(--x-default-color-border)
        var(--option-list-border-style);
    }
  }

  & .Option.isContainer {
    border-top: 1px var(--x-default-color-border)
      var(--option-list-border-style);
    border-bottom: 1px var(--x-default-color-border)
      var(--option-list-border-style);

    &:first-child {
      border-top-width: 0;
    }

    &:last-child {
      border-bottom-width: 0;
    }
  }

  & .Details {
    border-top: 1px var(--x-default-color-border)
      var(--option-list-border-style);
  }
}
/* stylelint-enable selector-max-specificity, selector-max-class */

.Option {
  -webkit-tap-highlight-color: transparent;
  background-color: var(--option-list-background-color);

  &:not(:first-child) {
    margin-top: var(--x-option-list-block-spacing);
  }

  &:first-child {
    border-top-left-radius: var(
      --x-option-list-border-radius,
      var(--x-control-border-radius, var(--x-global-border-radius))
    );
    border-top-right-radius: var(
      --x-option-list-border-radius,
      var(--x-control-border-radius, var(--x-global-border-radius))
    );
  }

  &:last-child {
    border-bottom-left-radius: var(
      --x-option-list-border-radius,
      var(--x-control-border-radius, var(--x-global-border-radius))
    );
    border-bottom-right-radius: var(
      --x-option-list-border-radius,
      var(--x-control-border-radius, var(--x-global-border-radius))
    );
  }
}

.OptionLabel {
  display: block;
  padding: var(--x-option-list-block-padding)
    var(--x-option-list-inline-padding);
}

.OptionLabel-cursorPointer {
  cursor: pointer;
}

.Details {
  background-color: var(--x-default-color-subdued);
  padding: var(--x-option-list-block-padding)
    var(--x-option-list-inline-padding);

  &:last-child {
    border-bottom-left-radius: var(
      --x-option-list-border-radius,
      var(--x-control-border-radius, var(--x-global-border-radius))
    );
    border-bottom-right-radius: var(
      --x-option-list-border-radius,
      var(--x-control-border-radius, var(--x-global-border-radius))
    );
  }
}

.Details-backgroundTransparent {
  background-color: transparent;
}

.Details-backgroundSurfacePrimary {
  background-color: var(--x-color-surface-primary);
}

.Details-backgroundSurfaceSecondary {
  background-color: var(--x-color-surface-secondary);
}

.Details-backgroundSurfaceTertiary {
  background-color: var(--x-color-surface-tertiary);
}