.tb-weather-forecast-list-container {
    margin-top: theme('margin.6');
}

.tb-weather-forecast-list {
    list-style: none;
    margin-bottom: 0;
    padding: 0;
}

.tb-weather-forecast-list__item:not(:first-child) {
    margin-top: theme('margin.4');
}

.tb-weather-forecast__header {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    padding: 1rem;
    border: 1px solid theme('colors.gray.400');
}

.tb-weather-forecast-header__info {
    @include mappy-bp(lg) {
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    margin-top: theme('margin.2');
}

.tb-weather-forecast-header__toggle {
    position: absolute;
    right: 0;
    top: 1.5rem;
    font-size: 4rem;
    color: theme('colors.secondary.500');
    background: transparent;

    .tb-weather-forecast-header__icon {
        transform: rotate(180deg);
        transition: transform $transition-time ease-in-out;
    }

    &[aria-expanded=true] {
        .tb-weather-forecast-header__icon {
            transform: rotate(0deg);
        }
    }

    &:focus-visible {
        outline: 2px dashed theme('colors.focus.500');
    }
}

// Initially hide Forecast Body
.tb-weather-forecast__body {
    width: 100%;
    height: 0;
    margin-top: 1em;
    visibility: hidden;
    transform: scaleY(0);
    transform-origin: top;
}

// Forecast Body is shown using target enhancement
.tb-weather-forecast__body--visible,
.tb-weather-forecast__body:target {
    height: auto;
    visibility: visible;
    transition: 300ms;
    transform: scaleY(1);
}

@include mappy-bp(md) {
    .tb-weather-forecast .tb-weather-additional-meta-list {
        display: flex;
        margin: 0;
        padding-top: theme('padding.2');
    }

    .tb-weather-forecast .tb-weather-additional-meta-list-item:not(:last-child) {
        margin-right: 1rem;
    }
}

@include mappy-bp(lg) {
    .tb-weather-forecast {
        align-items: center;
    }

    .tb-weather-forecast .tb-weather-featured {
        display: flex;
        flex-wrap: wrap;
    }

    .tb-weather-forecast .tb-weather-list-item__title {
        width: 100%;
    }


    .tb-weather-hourly-preview {
        flex-wrap: nowrap;
    }
}
