/*  COMPONENT: PLANTREFF 
//////////////////////////////////////////////////////////////////////////////*/

@layer components {
    :root {
        --pt-beige: #ba927d;
        --pt-beige-dark: #a07865;
        --pt-gray: #595959;
        --pt-olive: #6e7b5b;
        --pt-blue: #44546a;
        --pt-red: #c53e3a;
        --pt-green: #9fcc3b;
        --pt-green-dark: #86b21c;
        --pt-petrol: #4fa4a7;
    }
    .separator--pt-beige {
        border-color: var(--pt-beige);
        > * {
            @media (min-width: 980px) {
                min-width: 12rem !important;
                width: 12rem !important;
            }
            background: var(--pt-beige);
            color: var(--color-black);
        }
    }
    .separator--pt-gray {
        border-color: var(--pt-gray);
        > * {
            @media (min-width: 980px) {
                min-width: 12rem !important;
                width: 12rem !important;
            }
            background: var(--pt-gray);
            color: var(--color-white);
        }
    }
    .separator--pt-olive {
        border-color: var(--pt-olive);
        > * {
            @media (min-width: 980px) {
                min-width: 12rem !important;
                width: 12rem !important;
            }
            background: var(--pt-olive);
            color: var(--color-white);
        }
    }
    .separator--pt-blue {
        border-color: var(--pt-blue);
        > * {
            @media (min-width: 980px) {
                min-width: 12rem !important;
                width: 12rem !important;
            }
            background: var(--pt-blue);
            color: var(--color-white);
        }
    }
    .separator--pt-red {
        border-color: var(--pt-red);
        > * {
            @media (min-width: 980px) {
                min-width: 12rem !important;
                width: 12rem !important;
            }
            background: var(--pt-red);
            color: var(--color-white);
        }
    }
    .separator--pt-green {
        border-color: var(--pt-green);
        > * {
            @media (min-width: 980px) {
                min-width: 12rem !important;
                width: 12rem !important;
            }
            background: var(--pt-green);
            color: var(--color-white);
        }
    }
    .separator--pt-petrol {
        border-color: var(--pt-petrol);
        > * {
            @media (min-width: 980px) {
                min-width: 12rem !important;
                width: 12rem !important;
            }

            background: var(--pt-petrol);
            color: var(--color-white);
        }
    }

    .pt {
        padding-block: var(--spacing-l);
        margin-left: 1rem;
        @media (min-width: 980px) {
            padding-block: var(--spacing-m);
            margin-left: 0;
        }
        .ce_hyperlink:first-of-type {
            border: none;
            bsorder-top: 1px solid var(--color-mbz-grey-300);
        }
        .ce_hyperlink:nth-of-type(odd) {
            sborder-right: 1px solid var(--color-mbz-grey-300);
        }
        .ce_hyperlink:nth-of-type(even) {
            smargin-left: -1px;
        }
        .ce_hyperlink {
            border: none;
            display: flex;
            &::before {
                content: "•";
                display: inline-block;
                padding-block: var(--spacing-xs);
            }

            .hyperlink_txt {
                align-items: start !important;
                text-decoration: underline;
                &:hover {
                    text-decoration: underline;
                    background-color: transparent;
                }
            }
        }

        @media (min-width: 980px) {
            .article {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr;
                gap: 1rem;
            }
        }
        .ce_hyperlink a {
            padding-block: var(--spacing-xs);
            padding-inline: var(--spacing-s);
        }
        .ce_hyperlink .hyperlink_txt::after {
            display: none;
        }
    }
    .pt-beige .ce_hyperlink::before {
        color: var(--pt-beige-dark);
    }
    .pt-beige .ce_hyperlink a {
        color: var(--pt-beige-dark);
    }
    .pt-gray .ce_hyperlink::before {
        color: var(--pt-gray);
    }
    .pt-gray .ce_hyperlink a {
        color: var(--pt-gray);
    }
    .pt-olive .ce_hyperlink::before {
        color: var(--pt-olive);
    }
    .pt-olive .ce_hyperlink a {
        color: var(--pt-olive);
    }
    .pt-blue .ce_hyperlink::before {
        color: var(--pt-blue);
    }
    .pt-blue .ce_hyperlink a {
        color: var(--pt-blue);
    }
    .pt-red .ce_hyperlink::before {
        color: var(--pt-red);
    }
    .pt-red .ce_hyperlink a {
        color: var(--pt-red);
    }
    .pt-green .ce_hyperlink::before {
        color: var(--pt-green-dark);
    }
    .pt-green .ce_hyperlink a {
        color: var(--pt-green-dark);
    }
    .pt-petrol .ce_hyperlink::before {
        color: var(--pt-petrol);
    }
    .pt-petrol .ce_hyperlink a {
        color: var(--pt-petrol);
    }
}