@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: .14285714rem .28571429rem .14285714rem 0;
    }

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

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