$slick-arrow-width: 25px !default;

.slick-arrow {
    @include button-directional;

    position: absolute;
    top: -55px;
    height: 20px;
    z-index: 30;
    width: $slick-arrow-width;
    cursor: pointer;

    .u-widget-title-sideways &,
    .featured-posts-slideshow[class] & {
        top: 0;
        height: 100%;
    }

    &.slick-disabled {
        .u-widget-title-sideways & {
            opacity: 0;
        }

        opacity: 0.3;
    }
}

.slick-next[class] {
    @include directional--right;
    @include spacing('padding-right', 0);
    right: 0;

    .u-widget-title-sideways & {
        right: -$slick-arrow-width - 10px;
    }

    .featured-posts-slideshow[class] & {
        right: $slick-arrow-width;
    }
}

.slick-prev[class] {
    @include directional--left;
    @include spacing('padding-left', 0);
    right: $slick-arrow-width + 20px;

    .u-widget-title-sideways & {
        left: -$slick-arrow-width - 10px;
    }

    .featured-posts-slideshow[class] & {
        left: $slick-arrow-width;
    }
}