@use 'admiral/assets/mixins' as *;

.wrapper {
    --input-pt: 0;
    --input-pr: calc(var(--control-space-m) / 2);
    --input-pb: 0;
    --input-pl: calc(var(--control-space-m) / 2);
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    height: var(--wrapper-height, var(--control-height-m));
    border: var(--control-border-width) solid
        var(--input-bcolor, var(--color-control-bg-border-default));
    border-radius: var(--input-bradius, var(--control-radius));
    background: var(--input-bg, var(--color-control-bg-default));
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, filter 0.16s;

    &:hover,
    &:focus-within {
        z-index: 2;
    }

    &:hover {
        border-color: var(--input-bcolor-hover, var(--color-control-bg-border-default-hover));
    }

    &:focus-within {
        filter: drop-shadow(
            0px 0px 1px var(--input-bcolor-focus, var(--color-control-bg-border-focus))
        );
        border-color: var(--input-bcolor-focus, var(--color-control-bg-border-focus));
    }

    &__SizeL {
        --wrapper-height: var(--control-height-l);
        --input-pr: calc(var(--control-space-l) / 2);
        --input-pl: calc(var(--control-space-l) / 2);
        --input-fz: var(--control-text-size-l);
    }

    &__SizeS {
        --wrapper-height: var(--control-height-s);
        --input-pr: calc(var(--control-space-s) / 2);
        --input-pl: calc(var(--control-space-s) / 2);
        --input-fz: var(--control-text-size-s);
    }

    &__SizeXS {
        --wrapper-height: var(--control-height-xs);
        --input-pr: calc(var(--control-space-xs) / 2);
        --input-pl: calc(var(--control-space-xs) / 2);
        --input-fz: var(--control-text-size-xs);
    }

    &__Alert {
        --input-bcolor: var(--color-bg-alert);
        --input-bcolor-hover: var(--color-bg-alert);
        --input-bcolor-focus: var(--color-bg-alert);
    }

    &__Disabled {
        --input-color: var(--color-control-typo-disable);
        --input-bg: var(--color-control-bg-disable);
        --input-bcolor: var(--color-control-bg-border-disable);
        --input-bcolor-hover: var(--color-control-bg-border-disable);
        --input-bcolor-focus: var(--color-control-bg-border-disable);
        cursor: not-allowed;

        & > .input {
            &::placeholder {
                color: var(--color-control-typo-disable);
            }
        }
    }

    &__Clear {
        --input-pr: 0;
        --input-pl: 0;
        --input-bg: var(--color-control-bg-clear);
        --input-bcolor: var(--color-control-bg-clear);
        --input-bcolor-hover: var(--color-control-bg-clear);
        --input-bcolor-focus: var(--color-control-bg-clear);
    }

    &__Suffix {
        grid-template-columns: minmax(0, 1fr) max-content;
    }
}

.input {
    flex-grow: 1;
    display: block;
    max-width: var(--input-max-width, none);
    height: 100%;
    min-height: 100%;
    padding: var(--input-pt) var(--input-pr) var(--input-pb) var(--input-pl);
    font-size: var(--input-fz, var(--control-text-size-m));
    line-height: 1.2;
    color: var(--input-color, var(--color-control-typo-default));
    caret-color: currentColor;
    border-radius: inherit;
    background: transparent;

    &:disabled {
        pointer-events: none;
    }

    &::placeholder {
        color: var(--color-control-typo-placeholder);
    }
}

.toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-right: var(--input-pr);
    color: var(--color-control-typo-placeholder);
    overflow: hidden;
    transition: transform 0.16s, color 0.16s;

    svg {
        width: 16px;
        height: auto;
    }

    &:hover:not(:active) {
        color: var(--color-control-bg-border-default-hover);
        transform: scale(1.1);
    }
}
