[data-template="actions"] {

    --gap-size: 16px;
    --wrapper-padding: 0;
    
    --font-size: 18px;
    --font-family: "NT Somic", sans-serif;
    
    /* menu */

    --menu-border-radius: 50px;
    --menu-paddings: calc(var(--gap-size) * 0.65) calc(var(--gap-size) * 1.5);
    --menu-size: calc(var(--font-size) - 2px);
    --menu-height: calc(var(--font-size) - 2px);
    --menu-weight: 600;

    --menu-active-border-width: 1.5px;
    --menu-inactive-border-width: 1.5px;

    /* picture */

    --picture-border-radius: 14px;

    /* text */

    --text-clamps: 7;

}

@media (prefers-color-scheme: light) {

    [data-template="actions"] {

        --font-color: #1C1C1C;

        --menu-active-border-color: #F826CA;
        --menu-active-bg-color: #F826CA;
        --menu-active-text-color: #FFF;

        --menu-inactive-border-color: #E9E9E9;
        --menu-inactive-bg-color: #E9E9E9;
        --menu-inactive-text-color: #515151;

        --picture-fallback-color: #CFDCF0;

        --header-color: #1C1C1C;

        --date-text-color: #1C1C1C;
        --date-border-color: rgba(28, 28, 28, 0.08);

    }

}

@media (prefers-color-scheme: dark) {

    [data-template="actions"] {

        --font-color: #FFF;

        --menu-active-border-color: #CEFF0C;
        --menu-active-bg-color: #CEFF0C;
        --menu-active-text-color: #1C1C1C;

        --menu-inactive-border-color: #1C1C1C;
        --menu-inactive-bg-color: #1C1C1C;
        --menu-inactive-text-color: #FFF;

        --picture-fallback-color: #404040;

        --header-color: #FFF;

        --date-text-color: #FFF;
        --date-border-color: rgba(255, 255, 255, 0.08);

    }

}

@media (max-width: 768px) {
    
    [data-template="actions"] {

        --menu-border-radius: 8px;
        --menu-size: calc(var(--font-size) - 4px);
        --menu-height: calc(var(--font-size) - 4px);
        --menu-weight: 500;

        --menu-active-border-width: 1px;
        --menu-inactive-border-width: 1px;

    }

    @media (prefers-color-scheme: light) {

        [data-template="actions"] {

            --menu-active-border-color: #F826CA;
            --menu-active-bg-color: #FFF;
            --menu-active-text-color: #363636;

            --menu-inactive-border-color: #FFF;
            --menu-inactive-bg-color: #FFF;
            --menu-inactive-text-color: #A6A6A6;

        }

    }

    @media (prefers-color-scheme: dark) {

        [data-template="actions"] {

            --menu-active-border-color: #CEFF0C;
            --menu-active-bg-color: #363636;
            --menu-active-text-color: #FFF;

            --menu-inactive-border-color: #363636;
            --menu-inactive-bg-color: #363636;
            --menu-inactive-text-color: #A6A6A6;

        }

    }

}