.ngx-timepicker-control {
    position: relative;
    display: flex;
    width: 60px;
    height: 30px;
    padding: 0 5px;
    box-sizing: border-box;

    &--active {
        &:after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: deepskyblue;
        }
    }

    &__input {
        width: 100%;
        height: 100%;
        padding: 0 5px 0 0;
        border: 0;
        font-size: 1rem;
        color: inherit;
        outline: none;
        text-align: center;

        &:disabled {
            background-color: transparent;
        }
    }

    &__arrows {
        position: absolute;
        right: 2px;
        top: 0;
        display: flex;
        flex-direction: column;
    }

    &__arrow {
        font-size: 11px;
        color: rgba(0, 0, 0, 0.4);
        cursor: pointer;
        transition: color 0.2s;
        user-select: none;

        &:hover {
            color: rgba(0, 0, 0, 0.9);
        }
    }
}
