@import "../../theme";

.textbox {
    background-color: @color-input-back;
    border: @size-border solid @color-border;
    box-sizing: content-box;
    color: @color-input-fore;
    height: @size-control-inner;
    line-height: @size-control-inner;
    outline: none;
    overflow: hidden;
    padding: 0;
    text-indent: @size-control-inner / 2 - @size-text-normal / 2;
    transition: background-color @time-slow;

    &:hover,
    &:focus {
        background-color: @color-input-hover;
        transition: background-color @time-fast;
    }

    &:focus {
        color: @color-input-fore-active;
    }

    &::placeholder {
        color: @color-input-fore-placeholder;
    }
}

input[type="time"]::-webkit-calendar-picker-indicator {
    // This magic values were generated by hex-to-filter converter:
    // https://codepen.io/sosuke/pen/Pjoqqp
    filter: invert(54%) sepia(3%) saturate(3931%) hue-rotate(153deg) brightness(115%) contrast(75%);
}
