@import 'variables';
@import 'mixins';

.menu {
    position: absolute;
    top: calc(100% + #{$spacer});
    left: 0;
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    li {
        list-style: none;
        flex: 0 0 100%;

        @media (min-width: $screen-sm) {
            flex-basis: 33%;
        }

        &::before {
            display: none;
        }
    }

    opacity: 0;

    :global(.has-menu-open) & {
        opacity: 1;
    }

    a {
        color: $text-color;
        line-height: 1;
        text-transform: uppercase;
        margin: 0;
        font-size: $font-size-small;
        text-shadow: 0 1px 0 rgba(#fff, .5);
        padding: $padding-base-horizontal;
        display: block;
        text-align: center;
    }
}