/* Clearable text input — field with trailing clear control */
.clearable-input {
    position: relative;
    display: block;
    width: 100%;
}

.clearable-input__field {
    width: 100%;
    padding-right: 2.5rem;
    box-sizing: border-box;
}

.clearable-input__clear {
    position: absolute;
    top: 50%;
    right: 0.45rem;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background-color: #888;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
    -webkit-mask-image: url("../../../assets/icons/close-circle-line.svg");
    mask-image: url("../../../assets/icons/close-circle-line.svg");
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.clearable-input__clear[hidden] {
    display: none !important;
}

.clearable-input__clear:hover {
    background-color: #333;
}

.input-component--clearable {
    margin-bottom: 0;
}

.input-component--clearable .input-component__error {
    margin-top: 0.35rem;
}