@use "sass:math";

.agenda-schedule {
    flex: 1; // fill .page-content
    display: flex;
    flex-direction: column;
    margin: 0 (-(($grid-gutter-width * .5))); // absorb .page-content padding

    .day {
        flex: 1;
        flex-shrink: 0;
        display: flex;
        align-items: baseline;
        padding: 10px;
        border-bottom: 1px solid $agenda-grid-border;
        background: $agenda-bg;

        .day-name {
            min-width: 100px;
            font-family: $headings-font-family;
            color: $agenda-color;
            padding: 5px;
            text-transform: uppercase; // todo : use a var
        }

        .day-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;

            //color: $agenda-color;
            background: transparent;
            border: 1px solid transparent;
            font-weight: bold;

            font-size: $font-size-lg;
        }

        &.now .day-number {
            color: $primary;
            background: transparent;
            border-color: $primary;
        }

        &.selected .day-number {
            color: white;
            background: $primary;
            border-color: $primary;
        }

        .day-events {
            flex: 1;
        }
    }

    .agenda-event {
        width: 100%;
        display: flex;
        align-items: baseline;
        text-align: center;
        padding: 5px 10px;
        border-radius: $border-radius;

        .event-color {
            flex-shrink: 0;
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: $event-color-default;
        }

        .event-duration {
            min-width: 140px;
            text-align: left;
        }

        &:hover {
            background: var(--#{$prefix}tertiary-bg);
        }
    }
}
