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

@layer base {
  .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--medium {
    --dbv-kit-input-height: var(--dbv-kit-input-medium-height);
    --dbv-kit-input-padding: var(--dbv-kit-input-medium-padding);
    --dbv-kit-input-font-size: var(--dbv-kit-input-medium-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);
  }
}
