.time-picker {
    position: relative;

    &.padding {
        padding: 16px;
    }
    span {
        display: flex;
        align-items: center;

        .picker-time-icon {
            right: 2px;
            cursor: pointer;
            padding-right: 0.8rem;

            svg {
                @include themify($themes) {
                    fill: themed('ChartHistoryPickerIcon');
                }
            }
        }
    }
    #time-picker-input.time-picker-input {
        font-family: $base-font;
        font-weight: normal;
        box-sizing: border-box;
        margin: 0;
        cursor: pointer;
        background: none;
        @include themify($themes) {
            color: themed('ChartHistoryPickerColor');
        }

        &.active,
        &:hover {
            @include themify($themes) {
                outline: none;
            }
        }
        &:focus-visible {
            outline: none;
        }
    }
    .time-picker-dropdown {
        font-size: 1.4em;
        position: absolute;
        top: 100%;
        right: 0;
        display: flex;
        flex-direction: column;
        opacity: 0;
        box-shadow: 0 2px 8px $COLOR_LIGHT_BLACK_6;
        z-index: -9;
        transition: all 300ms ease;
        border-radius: $border-radius;
        pointer-events: none;
        @include themify($themes) {
            color: themed('ChartHistoryPickerColor');
            background: themed('ChartHistoryPickerDropdownBg');
            border: 1px solid themed('ChartHistoryPickerDropdownBorder');
        }

        &.active {
            opacity: 1;
            z-index: 9;
            top: calc(100% + 2.6rem);
            pointer-events: initial;
            filter: drop-shadow(0 0 24px $COLOR_LIGHT_GRAY_7) drop-shadow(0 24px 24px $COLOR_LIGHT_GRAY_7);
        }
        &.from-right {
            right: 0;
        }
        .time-picker-selector {
            display: flex;
            flex-direction: row;

            .time-picker-hours {
                border-radius: 0 0 0 $border-radius;
                width: 13.6rem;
                @include themify($themes) {
                    border-right: 1px solid themed('ChartHistoryPickerDropdownBorder');
                }

                & .list-container {
                    grid-template-columns: repeat(4, 2.4rem);
                }
            }
            .time-picker-minutes {
                width: 7.2rem;
                border-radius: 0 0 $border-radius;

                & .list-container {
                    grid-template-columns: repeat(2, 2.4rem);
                }
            }
            .time-picker-hours,
            .time-picker-minutes {
                display: inline-block;
                overflow: hidden;
                text-align: center;

                .list-title {
                    padding: 0.8rem 0.8rem 0;
                    @include themify($themes) {
                        color: themed('ChartHistoryPickerHeaderColor');
                    }

                    strong {
                        font-weight: bold;
                    }
                }
                .list-container {
                    grid-auto-rows: 2.4rem;
                    display: grid;
                    grid-gap: 0.8rem;
                    padding: 0.8rem;

                    & .list-item {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        transition: all 0.3s ease;
                        cursor: pointer;
                        border-radius: $border-radius;
                        @include themify($themes) {
                            color: themed('ChartHistoryPickerBodyColor');
                        }

                        &.selected {
                            @include themify($themes) {
                                background: themed('ChartHistoryPickerBodyActiveBg');
                                color: themed('ChartHistoryPickerBodyActiveColor');
                                font-weight: 700;
                            }
                        }
                        &.disabled {
                            cursor: default;
                            @include themify($themes) {
                                color: themed('ChartHistoryPickerBodyDisableColor');
                            }
                        }
                        &:hover {
                            @include themify($themes) {
                                background: themed('ChartHistoryPickerBodyHoverBg');
                            }
                        }
                    }
                }
            }
        }
    }
}

.smartcharts-desktop .time-picker-input {
    font-size: 1.4em;
    padding-left: 0.8rem;
}