/* =================================================
   AIVELLE FIXED PAGE TOOLS
================================================= */

.aivelle-page-tools {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 120;

    display: flex;
    align-items: center;
    gap: 15px;

    min-height: 176px;
    padding: 22px 14px 22px 11px;

    border: 1px solid rgba(201, 164, 92, 0.72);
    border-right: 0;

    background:
        rgba(0, 0, 0, 0.46);

    box-shadow:
        -10px 0 34px rgba(0, 0, 0, 0.18);

    opacity: 0.36;

    transform:
        translate3d(52px, -50%, 0);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    transition:
        transform 0.55s cubic-bezier(.22, .75, .25, 1),
        opacity 0.45s ease,
        background-color 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}


.aivelle-page-tools:hover,
.aivelle-page-tools:focus-within,
.aivelle-page-tools.is-open {
    opacity: 1;

    transform:
        translate3d(0, -50%, 0);

    background:
        rgba(0, 0, 0, 0.92);

    border-color:
        #c9a45c;

    box-shadow:
        -18px 0 42px rgba(0, 0, 0, 0.34);
}


/* =================================================
   Vertical Label
================================================= */

.aivelle-page-tools-label {
    display: block;

    color:
        #c9a45c;

    font-family:
        Helvetica, Arial, sans-serif;

    font-size:
        10px;

    font-weight:
        400;

    letter-spacing:
        0.22em;

    line-height:
        1;

    text-transform:
        uppercase;

    writing-mode:
        vertical-rl;

    transform:
        rotate(180deg);

    user-select:
        none;
}


/* =================================================
   Favourite Button
================================================= */

.aivelle-page-tool-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    padding: 0;

    border:
        1px solid rgba(201, 164, 92, 0.8);

    border-radius:
        50%;

    background:
        rgba(0, 0, 0, 0.3);

    color:
        #c9a45c;

    cursor:
        pointer;

    transition:
        color 0.35s ease,
        background-color 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease;
}


.aivelle-page-tool-button:hover,
.aivelle-page-tool-button:focus-visible {
    color:
        #d9b870;

    border-color:
        #d9b870;

    background:
        rgba(201, 164, 92, 0.12);

    transform:
        scale(1.06);

    outline:
        none;
}


.aivelle-page-tool-button i {
    font-size:
        19px;

    line-height:
        1;

    pointer-events:
        none;
}


.aivelle-page-tool-button.is-saved {
    color:
        #c9a45c;

    background:
        transparent;

    border-color:
        #c9a45c;
}


.aivelle-page-tool-button.is-saved i {
    color:
        #c9a45c;
}


.aivelle-page-tool-button.is-loading {
    opacity:
        0.5;

    pointer-events:
        none;
}


/* =================================================
   Accessible Status
================================================= */

.aivelle-page-tools-status {
    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(0, 0, 0, 0);

    white-space:
        nowrap;

    border:
        0;
}


/* =================================================
   Mobile
================================================= */

@media (max-width: 700px) {

    .aivelle-page-tools {
        min-height:
            148px;

        padding:
            18px 10px 18px 9px;

        gap:
            11px;

        transform:
            translate3d(48px, -50%, 0);

        opacity:
            0.32;
    }


    .aivelle-page-tools.is-open,
    .aivelle-page-tools:focus-within {
        transform:
            translate3d(0, -50%, 0);

        opacity:
            1;
    }


    .aivelle-page-tool-button {
        width:
            42px;

        height:
            42px;
    }


    .aivelle-page-tools-label {
        font-size:
            9px;

        letter-spacing:
            0.19em;
    }

}


@media (prefers-reduced-motion: reduce) {

    .aivelle-page-tools,
    .aivelle-page-tool-button {
        transition:
            none;
    }

}