@value (
  size18,
  size42,
  size30,
  size34,
  sizeFluid
) from '../../styles/variables/_size.css';

@value (
  spaceNone,
  spaceXSmall,
  spaceSmall,
  spaceMedium,
  spaceXXSmall
) from '../../styles/variables/_space.css';

@value (
  borderRadiusMedium,
  borderRadiusSmall,
  borderWidthSecondary,
  borderWidthTertiary,
  borderWidthNone,
  borderRadiusXSmall
) from '../../styles/variables/_border.css';

@value (
  colorTextPrimary,
  colorTextSecondary,
  colorBorderPrimary,
  colorFillPrimary,
  colorFocusPrimary,
  colorFocusDanger,
  colorTextDisabled,
  colorFillDisabled,
  colorTextDanger,
  colorBackgroundTertiary
) from '../../styles/variables/_color.css';

.container {
  color: colorTextPrimary;
  width: sizeFluid;
}

.box {
  display: flex;
  align-items: center;
  color: colorTextPrimary;
  gap: spaceXSmall;
  height: size42;
  padding: spaceNone spaceSmall;
  border: borderWidthSecondary solid colorBorderPrimary;
  background-color: colorBackgroundTertiary;
}

.locked {
  border-style: dashed;
}

.medium {
  composes: formInputMedium from '../../styles/typography.module.css';
  height: size42;
  border-radius: borderRadiusMedium;
}

.colorText {
  composes: formInputMedium from '../../styles/typography.module.css';
  color: colorTextSecondary;
}

.hasValue {
  color: colorTextPrimary;
}

.small {
  composes: formInputSmall from '../../styles/typography.module.css';
  height: size34;
  border-radius: borderRadiusSmall;
}

.wrapper.withError .box {
  border-color: colorTextDanger;
}

.wrapper.withError:focus-within .box {
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusDanger;
}

.box input {
  width: sizeFluid;
  height: sizeFluid;
  cursor: inherit;
}

.wrapper:not(.inputDisabled):not(.withError):focus-within .box {
  border-color: colorFillPrimary;
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}

.inputDisabled {
  color: colorTextDisabled;
  border-color: colorBorderPrimary;
  background-color: colorFillDisabled;
}

input::placeholder {
  color: colorTextSecondary;
}

.inputDisabled input::placeholder {
  color: inherit;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: sizeFluid;
  gap: spaceXXSmall;
}

.info {
  display: flex;
  justify-content: space-between;
}

.infoContent {
  display: flex;
}

.rightClickableIcon {
  cursor: pointer;
}

.rightClickableIcon.disabled {
  pointer-events: none;
}

.box.color {
  padding-right: spaceMedium;
}

.box > input[type='color'] {
  display: flex;
  cursor: pointer;
  align-items: center;
  width: fit-content;
  gap: spaceXSmall;
  padding: spaceNone;
  width: size18;
  height: size18;
  margin: spaceNone;
}

.box > input[type='color']::-webkit-color-swatch {
  display: flex;
  padding: spaceNone;
  align-self: center;
  border: none;
  min-width: size18;
  min-height: size18;
  border-radius: borderRadiusXSmall;
}