@use './mixins/_themesMixins.scss' as theme;
@use './mixins/_stylesMixins.scss' as style;
@use './mixins/_interactions.scss' as interaction;
@import './modules/_pxToRem.scss';

.label {
  @include theme.color-input-label;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: px-to-rem(8);
  position: relative;
  user-select: none;
  width: 100%;

  &.xs {
    @include style.body-12-regular;
  }
  &.sm {
    @include style.body-14-regular;
  }
  &.md {
    @include style.body-16-regular;
  }
  &.lg {
    @include style.body-16-regular;
  }
  &.xl {
    @include style.body-18-regular;
  }
}

.inputError {
  @include theme.border-input-error;
  @include theme.color-input-error;
}

.disabled {
  @include interaction.element-disabled;
}