@import '../../styles/variables';

.slide-carousel {
    text-align: center;
}

.slide-panel,
.slide-navigator,
.slide-carousel-header {
    margin: 20px;
}

.slide-carousel-title {
    font-weight: bold;
}

.slide-navigator > .slide-selector {
    display: inline-block;
    margin: 0 5px;
}

.slide-panel[aria-hidden='true'] {
    display: none;
}

.slide-selector {
    width: 10px;
    height: 10px;
    background: $bdl-box-blue-50;
    border-radius: 50%;
    cursor: pointer;

    &:active {
        background: $bdl-dark-blue;
    }

    &:focus {
        background: $bdl-box-blue-50;
    }

    &:hover {
        background: $bdl-light-blue;
    }

    &.is-selected {
        background: $bdl-box-blue;
    }
}