/**********/
    /* Buttons */
    button,
    a.button,
    input[type="submit"] {
        height: fit-content;
        width: fit-content;
        border: none;
        border-style: none;
        border-radius: 20rem;
        padding: .9em 1.65em;	

        font-family: var(--font-body);
        font-size: var(--font-size-button-primary);
        font-weight: var(--weight-strong);
        line-height: var(--line-height-mini);
        text-decoration: none;
        cursor: pointer;
    }

    /*****/
        /* Primary Button */
        :is(button, a.button).primary,
        input[type="submit"] {
            display: flex;
            justify-content: center;
            align-items: center;
            border: none;

            background-color: var(--brand-color);
            color: var(--white);
			text-align: center;

            transition: var(--background-color-transition);
        }

        :is(button, a.button).primary:hover,
        input[type="submit"]:hover {
            background-color: var(--brand-color-hover);
        }

        :is(button, a.button).primary:active,
        input[type="submit"]:active {
            background-color: var(--brand-color-active);
        }

        :is(button, a.button).primary.mini {
            padding: 12px 16px;
            font-size: 12px;
            min-width: fit-content;
        }
        /* / Primary button */
    /*****/

    /*****/
        /* Secondary button */
        :is(button, a.button).secondary {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 10px;

            padding: 0;
            border: none;

            color: var(--brand-color);
            background-color: transparent;

            font-size: 16px;
            text-align: left;
            line-height: var(--line-height-xs);
        }

        button.secondary:hover,
        button.secondary:active,
        button.secondary:focus {
            background-color: transparent;
            color: var(--brand-color);
        }

        :is(button.secondary, a.button.secondary) .icon {
            flex-shrink: 0;

            height: 14px;
            width: 14px;

            translate: 0 0;
            transition: translate 100ms ease-out;
        }

        :is(button, a.button).secondary:hover .icon,
        .secondary-button-trigger:hover :is(button, a.button).secondary .icon {
            translate: 3px 0;
        }

        :is(button, a.button).secondary.no-anim:hover .icon {
            translate: 0 0;
        }

        /* :is(button, a.button).secondary::after {
            flex-shrink: 0;

            content: '';
            height: 14px;
            width: 14px;
            background-image: url('../icons/icon-right-arrow.svg');
            background-size: cover;
            background-position: center;
            transform: translateX(0);
            transition: transform .15s ease-in-out;
        } */

        /* :is(button, a.button).secondary:hover::after,
        .secondary-button-trigger:hover :is(button, a.button).secondary::after {
            transform: translateX(3px);
        }

        :is(button, a.button).secondary.no-anim:hover::after {
            transform: translateX(0);
        } */

        /***/
            /* Mini Secondary Button */
            :is(button, a.button).secondary.mini {
                gap: .5rem;
                font-size: .875rem;
            }

            :is(button, a.button).secondary.mini .icon {
                height: .75rem;
                width: .75rem;
            }

            /* :is(button, a.button).secondary.mini::after {
                height: .75rem;
                width: .75rem;
            } */
            /* / Mini Secondary Button */
        /***/

        /* / Secondary button */
    /*****/

    /* /Buttons */
/**********/

/**********/
    /* Sliding Pill Tabs */
    .sliding-pill.wrapper {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;
        gap: 0;
        
        padding: 4px 4.55px;
        border-radius: var(--radius-md);
        
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-behavior: smooth;
        
        background-color: var(--pink);
        background: var(--pink-gradient);
        
        user-select: none;
    }

    .sliding-pill.wrapper::-webkit-scrollbar {
        display: none;
    }

    .sliding-pill div.pill {
        z-index: 0;
        position: absolute;
        height: calc(100% - 8px);
        background: var(--background);
        box-shadow: var(--background-shadow-mini);
        
        border-radius: var(--radius-md);
        
        transition: left .3s ease-in-out, width .3s ease-in-out;
    }

    .sliding-pill :is(button, a).tab {
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;
        
        padding: var(--padding-blurb);
        height: calc((var(--padding-blurb-v) * 2) + (var(--line-height-sm) * 1em));

        line-height: 0;
        font-size: var(--font-size-sm);

        background: none;
        color: var(--color-strong);
        white-space: nowrap;
        font-weight: var(--weight-normal);
        text-decoration: none;
    }

    /* / Sliding Pill Tabs */   
/**********/


/**********/
    /* RB Accordion */ 

    div.rb-accordion,
    div.rb-accordion .e-con-inner{
        display: flex;
        flex-direction: column;
        gap: var(--boxes-gap);
        
        max-width: var(--heading-max-width);
    }

    .rb-accordion .accordion-item {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        gap: 0;
        
        border-radius: var(--radius-sm);
        overflow: hidden;
        
        background: var(--background-light);
        font-size: var(--font-size-md);
    }

    .rb-accordion .accordion-item .accordion-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--padding-box-sm);
        
        width: 100%;
        padding: var(--padding-box-sm);

        font-size: var(--font-size-lg);
        
        color: var(--color-strong);
        font-weight: var(--weight-strong);
        line-height: var(--line-height-sm);
        cursor: pointer;
    }

    .rb-accordion .accordion-header .accordion-icon {
        aspect-ratio: 10 / 16;
        height: calc(var(--font-size-lg) + 2px);
        width: auto;
        flex-shrink: 0;
        transition: transform 150ms linear;
    }

    .rb-accordion .accordion-header.active .accordion-icon {
        transform: rotateX(180deg)
    }

    .rb-accordion .accordion-title {
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;
        gap: 0;
    }

    .rb-accordion .accordion-item .accordion-content {
        box-sizing: border-box;
        padding: 0 var(--padding-box-sm);
        width: 100%;
        max-height: 0;
        
        color: var(--lowered-opacity-text);
        line-height: var(--line-height-md);

        overflow: hidden;
        transition: max-height 300ms ease, margin 300ms ease;
    }

    .rb-accordion .accordion-content p {
        margin: 1em 0;
    }

    .rb-accordion .accordion-content p:first-child {
        margin-top: 0;
    }

    .rb-accordion .accordion-content p:last-child {
        margin-bottom: 0;
    }

    .rb-accordion .accordion-item .accordion-content.open {
        margin: 0 0 var(--padding-box-sm) 0;
    }

    /* /RB Accordion */
/**********/

/**********/
    /* Badge */
    .badge {
       display: flex;
       flex-direction: row;
       justify-content: center;
       align-items: center;
       gap: var(--blurb-gap); 

       width: fit-content;
       padding: var(--padding-blurb);
       border-radius: var(--radius-bitty);

       background-color: var(--background);
       box-shadow: var(--background-shadow-mini);

       white-space: nowrap;
       font-size: var(--font-size-blurb);
       line-height: var(--line-height-xs);
       color: var(--color-strong);

       svg.badge-icon {
            flex-shrink: 0;
            width: var(--font-size-blurb);
            height: var(--font-size-blurb);
            color: var(--outline-dark);
       }

       &.badge__icon-color-brand-color {
            svg.badge-icon {
                color: var(--brand-color);
            }
       }

       &.badge__icon-color-outline-dark {
            svg.badge-icon {
                color: var(--outline-dark);
            }
       }

       &.badge__text-color-color-body {
            color: var(--color-body);   
       }

    }
    /* / Badge */

/**********/

/**********/
    /* Blurb */
    .blurb.outer-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: var(--boxes-gap);
        flex-wrap: wrap;
    }

    .blurb.wrapper {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: .25rem;
        
        padding: var(--padding-blurb);
        border-radius: 100rem;
        background: var(--pink-gradient);
        
        font-size: .75rem;
    }

    .blurb.wrapper span {
        white-space: nowrap;
        font-weight: 500;
        line-height: 1;
        color: var(--brand-color);
    }

    .blurb.wrapper svg, 
    .blurb.wrapper svg.blurb-icon {
        height: 10px ;
    }

    @media (min-width: 1025px) {
        .blurb.wrapper {
            gap: .5rem;
            font-size: .875rem;
        }
        .blurb.wrapper svg, 
        .blurb.wrapper svg.blurb-icon {
            height: 12px;
        }
    }
    /* /Blurb */
/**********/


/**********/
    /* Blog categories (in loop items) */
    .categories a {
        font-size: .625rem;
        font-weight: 500;
        border-radius: 20rem;
        padding: var(--padded-link-padding);
        color: var(--color-strong);
        line-height: 1;
        white-space: nowrap;
        position: relative;
        z-index: 1;
    }

    .categories a::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -2;
        border-radius: 20rem;
        background: var(--pink-gradient);
    }

    .categories a::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        border-radius: 20rem;
        background: var(--pink-gradient-hover);
        opacity: 0;
        transition: opacity 150ms ease;
    }

    .categories a:hover::after {
        opacity: 1;
    }

    @media (min-width: 1025px) {
        .categories a {
            font-size: .75rem;
        }
    }
    /* /Blog categories (in loop items) */
/**********/