@use './m3-optgroup';
@use '../tokens/token-utils';

$fallbacks: m3-optgroup.get-tokens();

.mat-mdc-optgroup {
  // These tokens are set on the root option group to make them easier to override.
  color: token-utils.slot(optgroup-label-text-color, $fallbacks);
  font-family: token-utils.slot(optgroup-label-text-font, $fallbacks);
  line-height: token-utils.slot(optgroup-label-text-line-height, $fallbacks);
  font-size: token-utils.slot(optgroup-label-text-size, $fallbacks);
  letter-spacing: token-utils.slot(optgroup-label-text-tracking, $fallbacks);
  font-weight: token-utils.slot(optgroup-label-text-weight, $fallbacks);
}

.mat-mdc-optgroup-label {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  min-height: 48px;
  padding: 0 16px;
  outline: none;

  &.mdc-list-item--disabled {
    opacity: 0.38;
  }

  // Needs to be overwritten explicitly, because the style can
  // leak in from the list and cause the text to truncate.
  .mdc-list-item__primary-text {
    // MDC assigns the typography to this element, rather than the element itself, which will break
    // existing overrides. Set all of the typography-related properties to `inherit` so that any
    // styles set on the host can propagate down.
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    font-family: inherit;
    text-decoration: inherit;
    text-transform: inherit;
    white-space: normal;
    color: inherit;
  }
}
