@import '../../../styles/mixins';
@import '../../../styles/definitions/colors';
@import '../../../styles/vendors/slick.scss';

.slickSlider {
    &_arrow {
        $arrow-size: 44px;
        $arrow-bg-color: $gray-78;

        display: flex;
        align-items: center;
        justify-content: center;
        width: $arrow-size;
        height: $arrow-size;
        padding: 0;
        border-radius: 50%;
        background-color: $arrow-bg-color;

        &:hover,
        &:focus {
            background-color: lighten($arrow-bg-color, $hover-alpha);
        }
    }

    &_caret {
        $icon-offset: 3px;
        height: 22px;
        fill: $white;

        &--left {
            margin-right: $icon-offset;
        }

        &--right {
            margin-left: $icon-offset;
        }
    }
}
