.tb-weather-navigation {
    position: relative;
    margin-top: theme('margin.6');
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;

    .tb-ui-icon {
        font-size: 2em;
        top: 0;
    }
}

/**
 * Reacting on our feature-query we show or hide
 * the target-link and the button, the latter
 * requiring JS to work.
 */
.js .tb-weather-navigation__targetlink,
.no-js .tb-weather-navigation__button,
.no-js .tb-weather-navigation-list + .tb-weather-navigation__targetlink {
    display: none;
}

.no-js .tb-weather-navigation__targetlink,
.js .tb-weather-navigation__button,
.no-js .tb-weather-navigation-list:target + .tb-weather-navigation__targetlink {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tb-weather-navigation__targetlink {
    border: 1px solid currentColor;
    padding: .5em;
    width: 100%;
    background: white;
    border-radius: .125em;

    ~ .tb-weather-navigation-list:target {
        height: auto;
        padding: .5rem 0;
        visibility: visible;
        transition: 300ms;
        transform: scaleY(1);
    }
}

// Closing Link positioned on top of the opening link.
.tb-weather-navigation__targetlink--closing {
    position: absolute;
    top: 0;
    left: 0;
}

/**
 * When we got JS and therefor the button to
 * toggle the visibility of the navigation,
 * we can do so using the state of the
 * aria-expanded value.
 * Using the same value we also hide or show
 * the correct icon on the button itself.
 */
.tb-weather-navigation__button {
    font-size: 1em;
    cursor: pointer;
    border: 1px solid currentColor;
    width: 100%;
    background: white;
    border-radius: .125em;
    padding: theme('padding.2') theme('padding.3');

    &[aria-expanded=false] .tb-ui-icon--arrow-up,
    &[aria-expanded=true] .tb-ui-icon--arrow-down {
        display: none;
    }

    + .tb-weather-navigation-list {
        height: 0;
        visibility: hidden;
        transform: scaleY(0);
        transform-origin: top;
    }
}

.tb-weather-navigation__button {
    &[aria-expanded=false] .tb-ui-icon__arrow-down,
    &[aria-expanded=true] .tb-ui-icon__arrow-up {
        display: block;
    }

    &[aria-expanded=true] + .tb-weather-navigation-list {
        height: auto;
        visibility: visible;
        transition: 300ms;
        transform: scaleY(1);
    }
}

// The link list.
.tb-weather-navigation-list {
    list-style: none;

    @include mappy-bp(md) {
        margin-top: theme('margin.6');
    }
}

.tb-weather-navigation-list-item {
    border-bottom: 1px solid currentColor;
    margin-top: 0;
}

.tb-weather-navigation-link {
    display: block;
    padding: theme('padding.2') theme('padding.3');
    text-decoration: none;
}

@include mappy-bp(md) {
    // Hide all the links and buttons no matter the state.
    .no-js .tb-weather-navigation__targetlink,
    .js .tb-weather-navigation__button,
    .no-js .tb-weather-navigation-list:target + .tb-weather-navigation__targetlink {
        display: none;
    }

    // Always show the list no matter the state.
    .tb-weather-navigation-list,
    .tb-weather-navigation__button + .tb-weather-navigation-list {
        height: auto;
        visibility: visible;
        transition: 300ms;
        transform: scaleY(1);
    }

    .tb-weather-navigation-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .tb-weather-navigation-list-item {
        border: 0;

        &:not(:last-child) {
            margin-right: 1rem;
        }
    }

    .tb-weather-navigation-link {
        border: 1px solid currentColor;
        width: 100%;
        background: white;
        border-radius: .125em;
    }
}
