/* Spacing between blocks */
:root :where(.is-layout-flow) > .at-block:last-child {
    margin-block-end: 0;
}

:root :where(.is-layout-flow) > *.at-block {
    margin-block-start: 0;
    margin-block-end: 0;
}

.at-block {
    margin-top: 0;
    margin-bottom: 0;
    margin-block-start: 0;
    margin-block-end: 0;
}

/* Animation */
[data-atb-animation] {
    opacity: 0;
}

/* Fade In */
.atb-animation-fade-in {
    animation: fadeIn var(--animation-duration, 1000ms) ease-in-out forwards;
    animation-delay: var(--animation-delay, 0ms);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Slide In */
.atb-animation-slide-in {
    opacity: 0;
    transform: translateY(20px);
    animation: slideIn var(--animation-duration, 1000ms) ease-in-out forwards;
    animation-delay: var(--animation-delay, 0ms);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Zoom In */
.atb-animation-zoom-in {
    opacity: 0;
    transform: scale(0.8);
    animation: zoomIn var(--animation-duration, 1000ms) ease-in-out forwards;
    animation-delay: var(--animation-delay, 0ms);
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Rotate In */
.atb-animation-rotate-in {
    opacity: 0;
    transform: rotate(10deg);
    animation: rotateIn var(--animation-duration, 1000ms) ease-in-out forwards;
    animation-delay: var(--animation-delay, 0ms);
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(10deg);
    }
    to {
        opacity: 1;
        transform: rotate(0deg);
    }
}

/* Flip In */
.atb-animation-flip-in {
    opacity: 0;
    transform: rotateY(180deg);
    animation: flipIn var(--animation-duration, 1000ms) ease-in-out forwards;
    animation-delay: var(--animation-delay, 0ms);
}

@keyframes flipIn {
    from {
        opacity: 0;
        transform: rotateY(180deg);
    }
    to {
        opacity: 1;
        transform: rotateY(0deg);
    }
}

.atb-animation-duration-normal {
    animation-duration: 1200ms;
}

.atb-animation-duration-slow {
    animation-duration: 2000ms;
}

.atb-animation-duration-fast {
    animation-duration: 750ms;
}

/* Spinner Loader */
.atb-spinner-loader {
    width: 20px;
    padding: 3px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #FFF;
    --_m: 
      conic-gradient(#0000 10%,#000),
      linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
            mask: var(--_m);
    -webkit-mask-composite: source-out;
            mask-composite: subtract;
    animation: l3 1s infinite linear;
}

@keyframes l3 {
    to {
        transform: rotate(1turn)
    }
}

.at-block-post-grid__button-button {
    &.with-spinner-loader {
        &:before {
            content: '';
            display: block;
            width: 20px;
            padding: 3px;
            aspect-ratio: 1;
            border-radius: 50%;
            background: #FFF;
            --_m: 
              conic-gradient(#0000 10%,#000),
              linear-gradient(#000 0 0) content-box;
            -webkit-mask: var(--_m);
                    mask: var(--_m);
            -webkit-mask-composite: source-out;
                    mask-composite: subtract;
            animation: l3 1s infinite linear;
        }
    }
}

// Star Rating.
.star-rating {
    overflow: hidden;
    position: relative;
    height: 1.618em;
    line-height: 1.618;
    width: 5.3em;
    font-family: star;
    font-weight: 400;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0;
    color: #ffa441;

    &:before {
        content: "SSSSS";
        opacity: .25;
        float: left;
        top: 0;
        left: 0;
        position: absolute;
    }

    span {
        overflow: hidden;
        float: left;
        top: 0;
        left: 0;
        position: absolute;
        padding-top: 1.5em;

        &:before {
            content: "SSSSS";
            top: 0;
            position: absolute;
            left: 0;
            color: #ffa441;
        }
    }
}