@import 'proto-ui.vusion/src/u-input.vue/module.css';

.root {
    padding: 0 10px;
    color: #666;
    border-color: $brand-secondary;
    border-radius: 3px;
    transition: border-color $transition-duration;
}
.root[close] {
    padding-right: 30px;
}

.input::placeholder {
    /* Removes placeholder transparency in Firefox. */
    opacity: 1;
    color: #999;
}

.root[focus] {
    border-color: #8ebee9;
}

.root[color="error"] {
    border-color: #ff867f;
}

.root[disabled] {
    background-color: $brand-disabled;
    border-color: $brand-disabled;
}

.close {
    position: absolute;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    right: 1px;
    top: 0;
    cursor: pointer;
}

.closeIcon {
    width: 18px;
    height: 18px;
    line-height: 18px;
    background: #f5f7fa;
    border-radius: 100%;
    display: inline-block;
}

.closeIcon:hover {
    color: #999;
    background-color: #ebedef;
}

.closeIcon::before {
    icon-font: url("../u-icon.vue/icons/close-small.svg");
    font-size: 16px;
    color: #b4b4b4;
    margin-right: 0;
    vertical-align: middle;
}

.root[size$="mini"] { width: 80px; padding: 0 6px; }
.root[size^="mini"] { height: 28px; line-height: 26px; }
.input[size$="mini"][close] { padding-right: 30px; }

.root[size$="small"] { width: 120px; padding: 0 8px; }
.root[size^="small"] { height: 30px; line-height: 28px; }
.input[size$="small"][close] { padding-right: 30px; }

.root[size$="normal"] { width: 160px; padding: 0 10px; }
.root[size^="normal"] { height: $height-base; line-height: 32px; }
.root[size$="normal"][close] { padding-right: 30px; }

.root[size$="medium"] { width: 280px; padding: 0 10px; }
.root[size^="medium"] { height: 36px; line-height: 34px; }
.input[size$="medium"][close] { padding-right: 30px; }

.root[size$="large"] { width: 440px; padding: 0 10px; }
.root[size^="large"] { height: 38px; line-height: 36px; }
.input[size$="large"][close] { padding-right: 30px; }

.root[size$="huge"] { width: 580px; padding: 0 10px; }
.root[size^="huge"] { height: 40px; line-height: 38px; }
.input[size$="huge"][close] { padding-right: 30px; }

.root[size$="full"] { width: 100%; padding: 0 10px; }
.root[size^="full"] { height: 100%; }
.input[size$="full"][close] { padding-right: 30px; }