@value ( sizeFluid) from '../../styles/variables/_size.css';
@value ( spaceXXSmall) from '../../styles/variables/_space.css';
@value ( colorTextDisabled, colorFocusPrimary) from '../../styles/variables/_color.css';
@value ( borderWidthNone, borderWidthTertiary, borderRadiusXSmall) from '../../styles/variables/_border.css';

.inlineDropdownContainer {
  display: flex;
  position: relative;
}

.isFluid {
  width: sizeFluid;
}

.inlineButton {
  display: flex;
  gap: spaceXXSmall;
  cursor: pointer;
  align-items: center;
  border-radius: borderRadiusXSmall;
}

.inlineButton:focus {
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}

.medium {
  composes: buttonTextMedium from '../../styles/typography.module.css';
}

.small {
  composes: buttonTextSmall from '../../styles/typography.module.css';
}

.extraSmall {
  composes: buttonTextExtraSmall from '../../styles/typography.module.css';
}

.disabled {
  pointer-events: none;
  color: colorTextDisabled;
  cursor: not-allowed;
}

.menuWrapper {
  width: var(--dropdown-width);
  z-index: var(--menu-elevation);
}