@import '~swiper/swiper.scss';

.swiper-pagination {
    &-bullets {
        display: flex;
        align-items: center;
        justify-content: center;

        margin: {
            top: map-get($spacers, 5);
            bottom: map-get($spacers, 5);
        }
    }

    &-bullet {
        width: 14px;
        height: 14px;
        display: block;
        background-color: transparent;
        transition: background-color ease-in-out 100ms;

        margin: {
            left: map-get($spacers, 2);
            right: map-get($spacers, 2);
        }

        border: {
            width: 1px;
            radius: 50%;
            style: solid;
            color: $secondary;
        }

        &:hover {
            cursor: pointer;
            background-color: transparentize($secondary, .5);
        }
    }

    &-bullet-active {
        background-color: $secondary;
    }
}


.slide {
    &-item {
        height: 100%;
        display: flex;
        flex-direction: column;

        padding: {
            left: map-get($spacers, 4);
            right: map-get($spacers, 4);
        }
    }

    &-content {
        flex: 1;
    }

    &-image {
        height: 9rem;
        margin-bottom: map-get($spacers, 3);
    }
}