@import './_base.css';
@import './_sizes.css';
@import './_variants.css';

.dbv-kit-input-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
}

.dbv-kit-input {
  background: var(--dbv-kit-input-background);
  border-radius: var(--dbv-kit-input-radius);
  border-color: var(--dbv-kit-input-border-color);
  border-width: var(--dbv-kit-input-border-width);
  border-style: var(--dbv-kit-input-border-style);
  color: var(--dbv-kit-input-foreground);
  padding-inline: var(--dbv-kit-input-padding);
  font-size: var(--dbv-kit-input-font-size);
  height: var(--dbv-kit-input-height);

  &:not(:disabled):hover {
    border-color: var(--dbv-kit-color-control-hover);
  }

  &:disabled {
    cursor: not-allowed;
    opacity: var(--dbv-kit-control-disabled-opacity);
  }

  &::placeholder {
    color: var(--dbv-kit-input-placeholder-foreground);
  }

  &:focus-visible,
  &[data-focus-visible] {
    outline: var(--dbv-kit-control-outline-width) solid var(--dbv-kit-control-outline-color);
    outline-offset: var(--dbv-kit-control-outline-offset);
  }
}

.dbv-kit-input__title {
  color: var(--dbv-kit-input-label-foreground);
  padding-inline-start: var(--dbv-kit-input-label-padding);
  margin-block-end: var(--tw-spacing);
}

.dbv-kit-input__title--required {
  &:after {
    content: '*';
    color: var(--dbv-kit-color-control-required);
    margin-inline-start: 0.125rem;
  }
}

/* ---------------------------- */
/* Sizes */

.dbv-kit-input--small {
  --dbv-kit-input-height: var(--dbv-kit-input-small-height);
  --dbv-kit-input-padding: var(--dbv-kit-input-small-padding);
  --dbv-kit-input-font-size: var(--dbv-kit-input-small-font-size);
}

.dbv-kit-input--large {
  --dbv-kit-input-height: var(--dbv-kit-input-large-height);
  --dbv-kit-input-padding: var(--dbv-kit-input-large-padding);
  --dbv-kit-input-font-size: var(--dbv-kit-input-large-font-size);
}

.dbv-kit-input--xlarge {
  --dbv-kit-input-height: var(--dbv-kit-input-xlarge-height);
  --dbv-kit-input-padding: var(--dbv-kit-input-xlarge-padding);
  --dbv-kit-input-font-size: var(--dbv-kit-input-xlarge-font-size);
}