:root {
    /* Blå */
    --lara-bla-bakgrund: #eef6fa;
    --lara-bla-accent: #356a8a;

    /* Grön */
    --lara-gron-bakgrund: #f2f7ed;
    --lara-gron-accent: #5f7f43;

    /* Gul */
    --lara-gul-bakgrund: #fff8df;
    --lara-gul-accent: #9a7618;

    /* Röd */
    --lara-rod-bakgrund: #fff1f1;
    --lara-rod-accent: #9a3c3c;

    /* Gemensam textfärg */
    --lara-ruta-text: #242424;
}

/* Gemensam färghantering */
.lara-farg {
    background-color: var(--lara-ruta-bakgrund);
    border-color: var(--lara-ruta-accent);
    color: var(--lara-ruta-text);
}

.lara-farg--bla {
    --lara-ruta-bakgrund: var(--lara-bla-bakgrund);
    --lara-ruta-accent: var(--lara-bla-accent);
}

.lara-farg--gron {
    --lara-ruta-bakgrund: var(--lara-gron-bakgrund);
    --lara-ruta-accent: var(--lara-gron-accent);
}

.lara-farg--gul {
    --lara-ruta-bakgrund: var(--lara-gul-bakgrund);
    --lara-ruta-accent: var(--lara-gul-accent);
}

.lara-farg--rod {
    --lara-ruta-bakgrund: var(--lara-rod-bakgrund);
    --lara-ruta-accent: var(--lara-rod-accent);
}
/* Gemensam ljudknapp för textsektioner i block (rubriker, textfält m.m.) */
.lara-ljud-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.lara-ljud-wrap--top {
    align-items: flex-start;
}

.lara-ljudknapp {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 2px solid #000000 !important;
    border-radius: 50%;
    background-color: #000000 !important;
    color: #ffffff !important;
    cursor: pointer;
}

.lara-ljudknapp:hover,
.lara-ljudknapp[aria-pressed="true"] {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.lara-ljudknapp:focus-visible {
    outline: 0px solid currentColor;
    outline-offset: 3px;
    background-color: #000000 !important;
}

.lara-ljudknapp__ikon {
    display: block;
    width: 1rem;
    height: 1rem;
    fill: #ffffff !important;
}

.lara-ljudknapp__ikon--paus {
    display: none;
}

.lara-ljudknapp[aria-pressed="true"] .lara-ljudknapp__ikon--spela {
    display: none;
}

.lara-ljudknapp[aria-pressed="true"] .lara-ljudknapp__ikon--paus {
    display: block;
}

@media (max-width: 480px) {
    .lara-ljudknapp {
        width: 1.75rem;
        height: 1.75rem;
    }
}