/* GALLERY
   The gallery shows a scrollable list of pictures
   This works alongside the GalleryViewComponent which uses the Components/_Gallery file
   
   The animations are handles below by (class: animation):
      c-gallery__figure--move-in-left   : galleryMoveInLeft
      c-gallery__figure--move-out-left  : galleryMoveOutLeft
      c-gallery__figure--move-in-right  : galleryMoveInRight
      c-gallery__figure--move-out-right : galleryMoveOutRight
*/

.c-gallery {
    display: grid;
    grid:
        "prev-btn photo next-btn" 1fr
        / [start] 6em 1fr 6em [end];
    overflow: hidden;

    margin-bottom: 1.5em;
}

.c-gallery__figure {
    grid-area: photo;
    grid-column-start: start;
    grid-column-end: end;
    opacity: 0;

    display: flex;
    align-items: center;

    padding: 0 6em;

    margin: 0;
    z-index: 1;
}

.c-gallery__figure--current {
    opacity: 1;
    z-index: 2;
}

.c-gallery__prev-btn, .c-gallery__next-btn {
    all: unset;
    color: black;
    opacity: 0.8;
    transition: opacity 0.5s;
    cursor: pointer;
    z-index: 3;

    width: 6em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.c-gallery__prev-btn svg, .c-gallery__next-btn svg {
    width: 4em;
}
.c-gallery__prev-btn:hover, .c-gallery__next-btn:hover {
    opacity: 1;
}
.c-gallery__prev-btn {
    grid-area: prev-btn;
}
.c-gallery__next-btn {
    grid-area: next-btn;
}

.c-gallery__figure--move-in-left {
    animation-name: galleryMoveInLeft;
    animation-duration: 0.8s;
}
.c-gallery__figure--move-in-right {
    animation-name: galleryMoveInRight;
    animation-duration: 0.8s;
}
.c-gallery__figure--move-out-left {
    animation-name: galleryMoveOutLeft;
    animation-duration: 0.8s;
}
.c-gallery__figure--move-out-right {
    animation-name: galleryMoveOutRight;
    animation-duration: 0.8s;
}

@keyframes galleryMoveInLeft {
    from {
        translate: 100%;
        opacity: 1;
    }
    to {
        translate: 0;
        opacity: 1;
    }
}
@keyframes galleryMoveInRight {
    from {
        translate: -100%;
        opacity: 1;
    }
    to {
        translate: 0;
        opacity: 1;
    }
}
@keyframes galleryMoveOutLeft {
    from {
        translate: 0;
        opacity: 1;
    }
    to {
        translate: -100%;
        opacity: 1;
    }
}
@keyframes galleryMoveOutRight {
    from {
        translate: 0;
        opacity: 1;
    }
    to {
        translate: 100%;
        opacity: 1;
    }
}