@charset "utf-8";
@import (optional, reference) "var.less";
/*File input*/
AX-FILE {
    --_input-h: var(--_sz-em-input);
    --_input-p-lr: var(--_sz-em-space);
    display: inline-flex;
    flex-direction: column;
    width: var(--_w-input);
    box-sizing: border-box;
    vertical-align: middle;
    position: relative;
    [rep=wrap] {
        font-size: var(--_sz-font);
        background-color: #fff;
        width: 100%;
        height: var(--_input-h);
        padding-left: var(--_input-p-lr);
        border: 1px solid var(--_c-text-bd);
        border-radius: @radius;
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        align-items: center;
        position: relative;
        .v3-trans-all();
        &:hover {
            border-color: var(--_c-prim);
        }
        &:focus-within {
            color: var(--_c-prim);
            border-color: var(--_c-prim);
            .v3-outline(var(--_c-prim-sd));
            [rep=label] {
                color: var(--_c-prim);
            }
        }
    }
    input {
        opacity: 0;
        position: absolute;
        left: -100000px;
    }
    [rep=placeholder] {
        color: var(--_c-ignore);
        line-height: calc(var(--_input-h) - 2px);
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        flex: auto;
    }
    [rep=tools]>* {
        font-size: var(--_sz-ignore);
        color: var(--_c-ignore);
        &:hover {
            color: var(--_c-prim);
        }
    }
    [rep=label] {
        text-align: left;
        width: 100%;
        padding: 1em 0;
        overflow: hidden;
        flex: auto;
    }
    [rep=label]:empty {
        display: none;
    }
    [rep=label]:where(:not(:empty))+[rep=placeholder] {
        display: none;
    }
    &:where(:not([multiple])) [rep=label] {
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    &:where([multiple]) [rep=label] {
        word-break: break-all;
        line-height: 1em;
        display: -webkit-box;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    [rep=mean] {
        color: var(--_c-ignore);
        content: 'file';
        font-family: var(--_ff-icon);
        cursor: pointer;
        width: var(--_sz-list);
        .v3-flex-center(inline-flex);
        .v3-trans-all();
        &:hover {
            color: var(--_c-prim);
        }
    }
    &[size=sm] {
        --_input-h: var(--_sz-em-body);
    }
    &[size=lg] {
        --_input-h: var(--_sz-em-large);
        --_input-p-lr: var(--_sz-em-font);
        &[multiple] [rep=label] {
            line-height: var(--_sz-em-brief);
        }
    }
}
