ACC SHELL

/* ==========================================================================
   Components.Menu
   ========================================================================== */

.c-menu {
    font-size: 0;
    text-align: center;
    text-transform: uppercase;
}

    .c-menu__item {
        @include rem(font-size, 13px);
        display: inline-block;
        width: 22%;
        padding-left: 14px;

        &:first-child {
            padding-left: 0;
        }

        &:last-child {
            width: 12%;
        }
    }

        .c-menu__link {
            position: relative;
            display: block;
            padding: 15px;
            background-color: $color-black;
            color: $color-primary;
            font-weight: bold;
            text-decoration: none;

            &:before,
            &:after {
                content: "";
                position: absolute;
                top: 0;
                width: 12px;
                height: 100%;
                background-color: $color-black;
                transform: skewX(-12deg);
            }

            &:before {
                transform-origin: right top;
                right: 100%;
                margin-right: -12px;
            }

            &:after {
                transform-origin: left top;
                left: 100%;
            }

            &:hover {
                background-color: $color-white;
                color: $color-black;

                &:before,
                &:after {
                    background-color: $color-white;
                }
            }

            .c-menu__item:first-child & {
                &:before {
                    display: none;
                }
            }

            .c-menu__item:last-child & {
                &:after {
                    display: none;
                }
            }

            @include mq("medium-up") {
                padding: 15px 5px;
            }

            @include mq("large-up") {
                padding: 15px;
            }
        }

        .c-menu__link--alt {
            background-color: $color-primary;
            color: $color-black;

            &:before,
            &:after {
                background-color: $color-primary;
            }
        }