ACC SHELL

/* ==========================================================================
   Components.Directory
   ========================================================================== */

.c-directory {
    @include rem(font-size, 13px);
    margin-bottom: 30px;
    text-align: center;
    text-transform: uppercase;
}

    .c-directory__img {
        display: block;
    }

    .c-directory__list {
        display: table;
        width: 100%;
    }

        .c-directory__item {
            display: table-cell;
            padding-left: 14px;
            vertical-align: middle;
            white-space: nowrap;

            &:first-child {
                width: 100%;
                padding-left: 0;
            }
        }

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

                &:before,
                &:after {
                    content: "";
                    position: absolute;
                    top: 0;
                    width: 12px;
                    height: 100%;
                    background-color: $color-primary;
                    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-directory__item:first-child & {
                    &:before {
                        display: none;
                    }
                }

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

            .c-directory__link--alt {
                background-color: $color-black;
                color: $color-white;

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