@use '@lucas-labs/lui-micro/color' as color;
@use '@lucas-labs/lui-micro/var' as var;

@mixin -all-inputs($state: null) {
    input#{$state},
    textarea#{$state},
    .ui.input > input#{$state},
    .ui.form input:not([type])#{$state},
    .ui.form select#{$state},
    .ui.form textarea#{$state},
    .ui.form input[type='date']#{$state},
    .ui.form input[type='datetime-local']#{$state},
    .ui.form input[type='email']#{$state},
    .ui.form input[type='file']#{$state},
    .ui.form input[type='number']#{$state},
    .ui.form input[type='password']#{$state},
    .ui.form input[type='search']#{$state},
    .ui.form input[type='tel']#{$state},
    .ui.form input[type='text']#{$state},
    .ui.form input[type='time']#{$state},
    .ui.form input[type='url']#{$state},
    .ui.selection.dropdown#{$state} {
        @content;
    }
}

@mixin input {
    @include -all-inputs {
        border-color: var(--color-input-border);
        color: var(--color-input-text);
        border-radius: var(--border-radius);
        line-height: 20px;
        padding: calc(#{var.get('measure/.375x')} - 1px) var.get('measure/.75x');

        + .ui.button:last-child {
            border-top-right-radius: var(--border-radius);
            border-bottom-right-radius: var(--border-radius);
        }
    }

    @include -all-inputs(':hover') {
        border-color: var(--color-input-border);
        color: var(--color-input-text);
    }

    @include -all-inputs(':focus') {
        border-radius: var(--border-radius);
        border-color: var(--color-input-border);
        color: var(--color-input-text);
        outline: 2px solid var(--color-accent);
        background-color: color.get('elevation/2');
    }

    @include -all-inputs('.active') {
        border-radius: var(--border-radius);
        outline: 2px solid var(--color-accent);

        > input.search {
            outline: none;
        }
    }

    .ui.action.input:not([class*='left action']) > input:focus {
        border-right-color: var(--color-input-border);
        z-index: 1;
    }

    .ui.action.input > .dropdown:not(:first-child):not(:last-child),
    .ui.action.input > .button:not(:first-child):not(:last-child),
    .ui.action.input > .buttons:not(:first-child):not(:last-child) > .button {
        border-radius: 0 !important;
    }

    .ui.action.input:not([class*='left action']) > input:focus + .ui.dropdown.selection,
    .ui.action.input:not([class*='left action']) > input:focus + .ui.dropdown.selection:hover,
    .ui.action.input:not([class*='left action']) > input:focus + .button,
    .ui.action.input:not([class*='left action']) > input:focus + .button:hover,
    .ui.action.input:not([class*='left action']) > input:focus + i.icon + .button,
    .ui.action.input:not([class*='left action']) > input:focus + i.icon + .button:hover {
        border-left-color: var(--color-input-border);
    }

    .ui.form .field > label {
        margin: 0 0 var.get('measure/.375x');
        font-size: var.get('font-size/md');
        font-weight: 600;
    }

    .ui.form textarea,
    .ui.form input:not([type]),
    .ui.form input[type='date'],
    .ui.form input[type='datetime-local'],
    .ui.form input[type='email'],
    .ui.form input[type='number'],
    .ui.form input[type='password'],
    .ui.form input[type='search'],
    .ui.form input[type='tel'],
    .ui.form input[type='time'],
    .ui.form input[type='text'],
    .ui.form input[type='file'],
    .ui.form input[type='url'] {
        min-height: 2.71428571em;
    }

    .ui.selection.dropdown {
        min-height: 2.71428571em;
        > input {
            min-height: 0;
            &:focus {
                outline: none;
            }
        }
    }

    .ui.multiple.dropdown > .label,
    .ui.multiple.search.dropdown > input.search {
        padding: var.get('measure/.375x') var.get('measure/.75x');
        margin: 0.14285714rem 0.28571429rem 0.14285714rem 0;
    }

    .ui.multiple.search.dropdown > input.search {
        padding-left: 0;
    }

    .ui.checkbox label,
    .ui.radio.checkbox label {
        margin-left: 20px !important;
    }
}