@use '~@/style/globals';
@use 'sass:color';

$group-border-color: #636363 !default;
$group-item-max-height: 65px !default;

.Timeline {
    .vis-timeline {
        border: none;
        background-color: globals.$calendar-main-background-color;

        .vis-panel {
            &.vis-bottom,
            &.vis-center,
            &.vis-left,
            &.vis-right,
            &.vis-top {
                border: none;
            }
        }

        .vis-time-axis {
            &.vis-foreground {
                background: rgba(#fff, 0.05);
                box-shadow: 0 0 5px rgba(#000, 0.25);
            }

            // stylelint-disable-next-line selector-max-compound-selectors
            .vis-text {
                color: globals.$text-nav-color;
                text-align: center;

                // stylelint-disable-next-line selector-max-compound-selectors
                &.vis-major {
                    margin-left: 0.5rem;
                    font-weight: 800;
                    text-transform: capitalize;
                }
            }
        }

        .vis-grid {
            &.vis-vertical {
                border-color: globals.$calendar-cells-border-color;
            }

            &.vis-today {
                background-color: globals.$calendar-current-date-background-color;
            }

            &.vis-sunday {
                background: rgba(#fff, 0.1);
            }
        }

        .vis-current-time {
            max-height: calc(100% - 42px);
            margin-top: 42px;
            background-color: globals.$calendar-time-cursor-color;
        }

        .vis-label {
            color: globals.$text-base-color;
        }
    }

    .vis-item {
        $border-radius: 10px;

        margin: 0;
        padding: 1.2rem 1.1rem;
        border: none;
        font-size: 1rem;

        &.vis-range {
            border-radius: $border-radius;
            background-color: globals.$calendar-event-normal-color;
            color: globals.$calendar-event-text-color;
            box-shadow: 1px 2px 3px rgba(#000, 0.5);

            &.vis-selected {
                background-color: color.adjust(globals.$calendar-event-normal-color, $lightness: 10%);
            }
        }

        &.vis-background {
            padding: 0.5rem 0.8rem;
            background-color: rgba(31, 31, 31, 0.6);
            color: rgba(255, 255, 255, 0.5);
        }

        .vis-item-overflow {
            display: flex;
            align-items: center;
        }

        .vis-item-content {
            padding: 0;
            white-space: pre-line;
        }

        // stylelint-disable-next-line selector-class-pattern
        .vis-onUpdateTime-tooltip {
            border-radius: 3px;
            background-color: globals.$bg-color-tooltip;
            line-height: 1.5;
            white-space: pre-wrap;
        }

        &:not(.vis-readonly):not(.vis-background) {
            cursor: pointer;

            .vis-drag-left,
            .vis-drag-right {
                width: 32px;
                background: rgba(#000, 0.1);
            }

            .vis-drag-left {
                left: 0;
                border-radius: $border-radius 0 0 $border-radius;
            }

            .vis-drag-right {
                right: 0;
                border-radius: 0 $border-radius $border-radius 0;
            }
        }

        &.vis-readonly {
            .vis-drag-center {
                cursor: no-drop;
            }
        }

        .vis-delete {
            right: -32px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 100%;
            border-radius: 3px;

            &::after {
                content: '\f1f8';
                color: globals.$text-danger-color;
                // stylelint-disable-next-line font-family-no-missing-generic-family-keyword
                font-family: 'Font Awesome 5 Free';
                font-size: 1.7rem;
                font-weight: 900;
            }

            &:hover {
                &::after {
                    color: #fff;
                }
            }
        }
    }

    .vis-tooltip {
        max-width: 50%;
        margin: 30px 0 0 15px;
        padding: globals.$content-padding-small-horizontal globals.$content-padding-small-vertical;
        border: none;
        border-radius: 3px;
        background-color: globals.$bg-color-tooltip;
        color: globals.$text-base-color;
        font-family: globals.$text-base-font-family;
        white-space: pre-wrap;

        .fas,
        .far {
            width: 1.5rem;
            margin-bottom: 3px;
            text-align: center;
        }

        .fa-exclamation-triangle {
            color: globals.$text-danger-color;
        }

        .fa-check {
            color: globals.$text-success-color;
        }
    }

    &--grouped {
        .vis-timeline {
            background-color: color.scale(globals.$calendar-main-background-color, $alpha: -30%);
        }

        .vis-vertical {
            background-color: globals.$calendar-main-background-color;
        }

        .vis-labelset {
            max-width: 280px;
            min-width: 180px;

            .vis-label {
                box-sizing: content-box;
                border-bottom: 1px solid $group-border-color;
                color: globals.$text-base-color;
            }

            .vis-inner {
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding: 10px;

                // Faux positif, @see https://github.com/stylelint-scss/stylelint-scss/issues/486
                // stylelint-disable-next-line scss/no-global-function-names, order/properties-order
                min-height: max(100%, 55px);
            }
        }

        .vis-foreground .vis-group {
            box-sizing: content-box;
            border-bottom: 1px solid $group-border-color;
        }

        .vis-item {
            &.vis-range {
                max-height: $group-item-max-height;
            }

            .vis-item-overflow {
                align-items: flex-start;
                overflow: hidden;
                max-height: calc(#{$group-item-max-height} - 1.2rem - 1.2rem);
            }
        }
    }
}
