@mio-navigation-mobile: 1000px;

.navigation {
    margin: 2px 0;
    width: 100%;
    display: flex;
    border-width: 0;
    border-color: var(--text-colour);
    border-style: solid;
    border-top-width: 1px;
    align-items: flex-start;
    justify-content: center;

    @media (max-width: @mio-navigation-mobile) {
        border: none;
        align-items: center;
        flex-direction: column;
    }

    @media (min-width: @mio-navigation-mobile) {
        &--left {
            justify-content: left;
            padding-left: 25px;
        }

        &--right {
            justify-content: right;
            padding-right: 25px;
        }
    }

    &--top {
        border-top-width: 0;
        border-bottom-width: 1px;
        align-items: flex-end;

        .navigation__option {
            border-top-width: 1px;
            border-bottom-width: 0;

            @media (min-width: @mio-navigation-mobile) {
                &--selected {
                    top: 1px;
                }
            }
        }
    }

    &__option {
        list-style: none;
        background-color: #c9bbcc;
        border: 1px solid var(--text-colour);
        border-top-width: 0;
        flex-grow: 0;

        @media (max-width: @mio-navigation-mobile) {
            background-color: var(--accent-colour);
            width: 100%;
            border: none;
            flex-grow: 1;
            margin-bottom: 1px;
        }

        &:not(:first-child) {
            border-left-width: 0;
        }

        &--selected {
            background-color: var(--background-colour);
            top: -1px;

            @media (max-width: @mio-navigation-mobile) {
                background-color: #a586c3;
                top: 0;
            }

            &:not(:first-child) {
                margin-left: -1px;
                border-left-width: 1px;
            }

            @media (min-width: @mio-navigation-mobile) {
                .navigation__link {
                    padding: 3px 1em;
                }
            }
        }
    }

    &__link {
        display: block;
        padding: 2px 1em;
        color: var(--text-colour);
        text-decoration: none;

        @media (max-width: @mio-navigation-mobile) {
            padding: 10px 15px;
            color: var(--text-colour-header);
            font-size: 1.5em;
        }

        &:hover {
            color: #609;
        }
    }
}