anephenix/ui

@import '../../../design-system/spacing.scss';
@import '../../../design-system/colours.scss';

#mobile-menu {
    background: $light;

    &.open {
        left: 0px;
        top: 0px;
        z-index: 7;
        width: 100vw;
        min-height: 100vh;
        display: block;
    }

    display: none;
    position: fixed;

    ul {
        margin-top: 0px;
        list-style-type: none;
        -webkit-padding-start: 0;
        border-top: $dark;

        li {
            font-size: 18pt;
            border-bottom: solid 1px $dark;
            border-bottom-color: lighten($dark, 80);

            a {
                display: block;
                padding: $spacer-three $spacer-five;
                width: 100%;
                text-decoration: none;
                color: $dark;

                &:hover {
                    color: $dark;
                }
            }
        }
    }

    #mobile-menu-header {
        display: flex;
        padding: $spacer-one;
        align-items: center;
        justify-content: flex-end;
    }

    #close-icon {
        cursor: pointer;
    }

    @media screen and (prefers-color-scheme: dark) {
        background: $dark;
        color: $light;

        #close-icon {
            &:hover {
                path {
                    stroke: darken($light, 20);
                }
            }

            path {
                stroke: $light;
            }
        }

        ul {
            li {
                a {
                    color: $light;

                    &:hover {
                        color: darken($light, 20);
                    }
                }
            }
        }
    }

    #hamburger {
        &:hover path {
            stroke: darken($light, 20);
        }

        path {
            stroke: $light;
        }
    }
}