@use './src/styles/framework' as *;
@use 'sass:math';

time-group-legacy {
    // self
    @include v-spacing($space-s);

    .time-group {
        &__container {
            display: flex;
            gap: $space-s;
        }

        &__old-time {
            @include font-small();
            color: $orange;
            text-decoration: line-through;
        }

        &__utc-offset {
            @include font-small();
            font-size: $font-size-xs;
        }

        &__date {
            @include font-small();
            color: $blue;
        }
    }

    // variations

    &.right-layout {
        @include mobile {
            align-items: flex-end;

            day-change-square-legacy {
                order: 1;
            }

            .time-group__main {
                order: 2;
            }

            .time-group__utc-offset {
                order: 3;
            }
        }
    }

    &.sparse {
        .time-group__main {
            @include v-spacing($space-s);
        }
    }
    &.day-change-left {
        .time-group__main {
            order: 2;
        }

        day-change-square-legacy {
            order: 1;
        }
    }

    &.day-change-floating {
        .time-group__container {
            position: relative;
            day-change-square-legacy {
                position: absolute;
                top: -$space-s;
                right: -6 * $space-s;
                background: $white;
                z-index: 1;
                padding: $space-s;
            }
        }

        &.day-change-left {
            .time-group__container {
                day-change-square-legacy {
                    left: -6 * $space-s;
                    right: auto;
                }
            }
        }
    }

    &.mini-list {
        .time-group {
            &__container {
                margin-bottom: 0;
            }

            &__main {
                margin-right: 0;
            }

            &__date {
                font-size: $font-size-xs;
                font-weight: $font-medium;
                color: $gray;
            }
        }

        day-change-square-legacy {
            padding-top: math.div($space-s, 2);
            padding-right: math.div($space-s, 2);
        }
    }
}
