@use './src/styles/colors' as *;
@use './src/styles/variables' as *;
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;
@use './src/styles/layouts' as *;

:host {
    font-size: $font-size-l;
    flight-props {
        padding: $space-xl;
    }

    .schedule-title {
        font-size: $font-size-m;
        color: $light-gray;
        font-weight: $font-medium;

        @include mobile {
            font-size: $font-size-s;
        }
    }

    ::ng-deep property,
    ::ng-deep time-group-legacy {
        .description {
            color: $light-gray;
        }
    }

    .days {
        grid-column: 1 / -1; // span all columns
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        @include h-spacing($space-m);
        @include v-spacing($space-m);

        .day {
            @include font-small();
            background-color: $day-color;
            border-radius: $border-radius;
            padding: $space-s $space-m;
            &.inactive {
                background-color: $day-color-inactive;
                color: transparentize($color: $gray, $amount: 0.5);
            }
        }
    }

    note {
        grid-column: 1 / -1; // span all columns
        flex: 100%;
    }
}
