.accordion {
    .accordion-title {
        position: relative;
        padding: 0.5rem 1rem 0.5rem 1rem;
        border-radius: 0.25rem;
        background-color: var(--v-tertiary);
        color: white;
        font-weight: 300;

        transition: background-color 0.3s ease-in-out;

        &:hover {
            background-color: var(--v-primary);

            .accordion-title-icon svg{
                path {
                    fill: var(--v-primary);
                    transition: fill 0.3s ease-in-out;
                }
            }
        }

        &::marker {
            content: "";
        }

        .accordion-title-icon svg {
            background-color: white;
            border-radius: 0.25rem;

            path {
                fill: var(--v-tertiary);
                transition: fill 0.3s ease-in-out;
            }
        }

        @media (min-width: 1200px) {
            padding: 0.5rem 1rem 0.6rem 1rem;
        }
    }

    details[name*="accordion-group"] {

        summary.accordion-title {
            .accordion-title-icon svg {
                transition: transform 0.3s ease-in-out;
            }
        }

        &[open] {
            summary.accordion-title {
                background-color: var(--v-primary);
                
                .accordion-title-icon svg {
                    transform: rotate(180deg);
                    transition: transform 0.3s ease-in-out;
                    
                    path {
                        fill: var(--v-primary);
                        transition: fill 0.3s ease-in-out;
                    }
                }
            }
        }
    }

    .accordion-content {
        padding-top: 1.5rem;
        padding-right: 1rem;
        padding-bottom: 0.5rem;
        border-radius: 0.25rem;
        background-color: var(--v-primary-light);
        color: #333;

        &:has(ul) {
            padding-left: 0rem;
        }

        p, span, h1, h2, h3, h4, h5, h6 {
            padding-left: 1rem;
        }

        ul {
            padding-left: 2.5rem !important;

            li.marker-services {
                padding-left: 0rem !important;

                &::before {
                    margin-left: -1.5rem !important;
                }
            }
        }

        ol {
            padding-left: 2rem;

            li::marker {
                color: var(--v-tertiary);
            }
        }
    }
}