/* Bottom right panel of help buttons */
.help {
    position: fixed;
    bottom: 1rem;
    right: 0.4rem;
    z-index: 11;

    @media (max-width: 39.95em) {
        right: 0;
    }
    @media (min-width: 60em) {
        right: 1.6rem;
    }

    .body--no-help & {
        display: none;
    }
}

.help__wrapper {
    display: inline-flex;
    align-items: flex-start;
}

@keyframes pulse-background {
    0% {
        background-size: 1% 0.1em;
    }
    100% {
        background-size: 200% 100em;
    }
}

.help__wrapper--loading {
    --size: 4rem;

    pointer-events: none;

    &::after {
        animation: pulse-background 1s ease infinite;
        animation-delay: 0.2s;
        background: url("https://propi.nyc3.cdn.digitaloceanspaces.com/assets/icons/loader.svg") center / 0.1em no-repeat;
        border-radius: 100%;
        content: '';
        height: var(--size);
        left: 50%;
        margin: -2rem 0 0 -2rem;
        opacity: 0.8;
        position: absolute;
        top: 50%;
        width: var(--size);
        z-index: 1;
    }

    .help__button {
        opacity: 0.2;
    }
}

.help__button {
    width: 3rem;
    height: 3rem;
    min-width: inherit;
    background-color: transparent;

    &::before {
        background-size: 50%;
    }
}