@use '../../scss/config.scss' as *;

.input {
    @include border-radius(sm);
    @include spacing(py-xs, px-sm);
    @include border(primary-50);
    @include background(transparent);    
    @include typography(regular, primary, hlg);
    @include size('w100%');

    color-scheme: var(--w-color-scheme);

    &[disabled] {
        @include typography(primary-30);
        cursor: no-drop;
    }

    &::file-selector-button {
        @include background(transparent);
        @include border(0);
        @include typography(primary);
    }

    &::placeholder {
        @include typography(primary-30);
    }

    &[type="color"] {
        @include spacing(p0);
    }

    &.info {
        @include border(info);
    }

    &.success {
        @include border(success);
    }

    &.warning {
        @include border(warning);
    }

    &.alert {
        @include border(alert);
    }

    &.fill {
        @include background(primary-50);
    }
}

.input-label {
    @include layout(flex, column);
    @include size('w100%');

    .label {
        @include typography(primary-20);
        @include spacing(mb-xs);
    }

    .wrapper {
        @include layout(flex, v-center, sm);
        @include position(relative);

        input {
            padding-left: 40px;
        }

        span {
            @include position(absolute);
            @include size(18px);
        }

        svg {
            @include position(absolute, l10px);
            @include size(18px);
            @include typography(primary-30);

            pointer-events: none;
        }
    }

    .subtext {
        @include typography(md, primary-30);
        @include spacing(mt-xs);
    }
}