/* rotator style for elements -- Shawn Torres 2/10/24, requrires inclusion of 'simplecycle.js' located in global js */ 

.simplecycle {
    display: block;
    border:1px solid #CCC;
    margin: 3em;
    position: relative;
    }
    .simplecycle::after {
        content:'slideshow is paused';
        display:inline-block;
        padding: .5em;
        color: #ccc;
        border: 1px solid #ccc;
        mix-blend-mode: difference;
        position: absolute;
        bottom: 3em;
        right: 1em;
        z-index: 5;
        opacity:0;
        transition: opacity .5s;
    }
    .simplecycle.paused::after {
        opacity: 1;
    }
    .simplecycle .cycleholder {
    width:100%;
    min-height: 45vh;
    aspect-ratio: 16/9;
    overflow: hidden;
    position: relative;
    /* using grid here to overlap elements, but you can use flex or absolute based on your needs */
    display: grid;
    align-items: center;
    justify-content: center;
    }
    .simplecycle .cycleholder > img {
    /* you can target types of child elements specifically, this example sets imgs behavior */
    object-fit: cover;
    object-position: center center;
    width:100%;
    height: 100%;
    max-height: 100%;
    align-self: start;
    }
    .simplecycle .cycleholder > * {
    /* using grid here to overlap elements, but you can use flex or absolute based on your needs */
    grid-area: 1 / 1 ;
    transition: opacity 1.5s ease-in-out;
    text-align: center;
    }
    .simplecycle .cycleholder .item { 
        opacity: 0;
        transition: opacity 1s ease-in-out; 
    }

    .simplecycle .cycleholder .item.active {
    opacity: 1;
    /* border: 2px solid red; */
    }  

    .simplecycle .pager {
    text-align: center;
    background-color: #ccc;
    }
    .simplecycle .pager a {
    color: var(--armyblack);
    text-decoration: none;
    line-height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding:.3em;
    width:2em;
    box-sizing: border-box;
    aspect-ratio: 1/1;
    border:1px solid #000;
    margin: .15em;
    transition: background-color .5s ease-in-out;
    }
    .simplecycle .pager a:hover {
        color:#fff;
        background-color: #000;
    }
    .simplecycle .pager a.active {
        color:#000;
        background-color: var(--armygold);
    }

    .simplecycle .arrow {
        opacity: 0;
        display: inline-block;
        box-sizing: border-box;
        width:5%;
        padding:20px;
        aspect-ratio: 1/1;
        background-color: black;
        position: absolute;
        z-index:10;
        top: 50%;
        transform: translateY(-50%); 
        text-decoration: none;
        text-align: center;
        font-size:large;
        color:#fff;
        transition: opacity .5s ease-in-out;
    }

    .simplecycle:hover .arrow {
        opacity: 1;
    }

    .simplecycle .arrow.scnext {
        right: 0px;
    }
    .simplecycle .arrow.scprev {
        left: 0px;
    }

    .simplecycle .arrow.scnext::before {
        font-family: 'armyicons';
        content: "\e907";
    }
    .simplecycle .arrow.scprev::before {
        font-family: 'armyicons';
        content: "\e908";
    }

    .simplecycle .arrow.disabled {
        opacity: 0;
        cursor: default;
        pointer-events: none;
    }

    /* responsive styles here */

    @media screen and (max-width:800px) {
        .simplecycle .arrow {
            width: auto;
        }
        .simplecycle {
            margin: 3em 0em;
            } 
    }