/* Arrows */
.dir-arrow {
    width: 47px;
    height: 120px;
    display: inline-block;
    position: relative;
    &.vtl {
        @include if-ltr {
            background-position: 0 0;
        }
        @include if-rtl {
            background-position: -101px 0;
        }
        width: 47px;
        height: 96px;
    }
    &.vtr {
        @include if-ltr {
            background-position: -101px 0;
        }
        @include if-rtl {
            background-position: 0 0;
        }
        width: 47px;
        height: 96px;
    }
    &.vbl {
        @include if-ltr {
            background-position: 0 -144px;
        }
        @include if-rtl {
            background-position: -101px -144px;
        }
        width: 47px;
        height: 96px;
    }
    &.vbr {
        @include if-ltr {
            background-position: -101px -144px;
        }
        @include if-rtl {
            background-position: 0 -144px;
        }
        width: 47px;
        height: 96px;
    }
    &.hlt {
        @include if-ltr {
            background-position: -209px 0;
        }
        @include if-rtl {
            background-position: -329px 0;
        }
        width: 120px;
        height: 47px;
    }
    &.hlb {
        @include if-ltr {
            background-position: -209px -101px;
        }
        @include if-rtl {
            background-position: -329px -101px;
        }
        width: 120px;
        height: 47px;
    }
    &.hrt {
        @include if-ltr {
            background-position: -329px 0;
        }
        @include if-rtl {
            background-position: -209px 0;
        }
        width: 120px;
        height: 47px;
    }
    &.hrb {
        @include if-ltr {
            background-position: -329px -101px;
        }
        @include if-rtl {
            background-position: -209px -101px;
        }
        width: 120px;
        height: 47px;
    }
}

/* Responsive */
@media (max-width: 575px) {
    .dir-arrow {
        display: none;
    }
}