// main: SliderPlex.sass

@font-face
    font-family: 'icomoon'
    src: url('../arrows/fonts/icomoon.eot?y8lnex')
    src: url('../arrows/fonts/icomoon.eot?y8lnex#iefix') format('embedded-opentype'), url('../arrows/fonts/icomoon.ttf?y8lnex') format('truetype'), url('../arrows/fonts/icomoon.woff?y8lnex') format('woff'), url('../arrows/fonts/icomoon.svg?y8lnex#icomoon') format('svg')
    font-weight: normal
    font-style: normal

.slider-plex

    .arrow
        /* use !important to prevent issues with browser extensions that change fonts */
        font-family: 'icomoon' !important
        speak: none
        font-style: normal
        font-weight: normal
        font-variant: normal
        text-transform: none
        line-height: 0
        color: $arrow-color
        position: absolute
        top: 50%
        padding: 0 35px
        /* We use z-index to show and hide our slides */
        /* We must set the `.arrow` z-index with a higher value */
        /* so the .arrow are always displayed in front of our slides */
        z-index: 555
        font-size: 50px
        cursor: pointer
        text-decoration: none
        outline: 0

        @include vp-transition(.3s)

        @media (max-width: 767px)
            display: none

        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased
        -moz-osx-font-smoothing: grayscale

    .arrow-left
        left: 0

        &:before
            content: "\e901"

    .arrow-right
        right: 0

        &:before
            content: "\e900"

.non-focus
    opacity: .3

    &:hover
        opacity: 1