ACC SHELL

/* ==========================================================================
   Components.Links
   ========================================================================== */

.c-links {
    background-color: #222222;
    font-size: 0;
    text-align: right;
    text-transform: uppercase;

    @include mq("small-up") {
        background-color: transparent;
        text-align: center;
    }
}

    .c-links__item {
        @include rem(font-size, 13px);
        display: inline-block;
        padding-left: 14px;
        vertical-align: top;
    }

        .c-links__link {
            position: relative;
            display: block;
            padding: 9px;
            background-color: $color-white;
            color: $color-black;
            font-weight: bold;
            text-decoration: none;

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

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

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

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

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

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

        .c-links__link--alt {
            padding: 10px 15px;
            background-color: $color-primary;
            color: $color-black;

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

            .c-links__icn {
                .c-links__link:hover & {
                    > svg {
                        > path {
                            fill: $color-white;
                        }
                    }
                }
            }