:root {
    --accordion-button-distance: 10px;
}

.frame:has(.coursefinder-search--accordion-item) {
    margin: 0;

    header {
        display: none;
    }

    &:first-of-type {
        margin-top: 20px;
    }
}
.coursefinder-search--accordion-item {
    .list-group-item {
        border-radius: 0;

        &:nth-child(even) {
            background-color: var(--gallery);
        }
    }
}

.accordion-item {
    button {
        font-size: 20px;
        color: #656565;;
        position: relative;
        padding: .5rem 1.25rem .5rem 3rem;
        cursor: pointer;
        border: 0;
        background: #F8F8F8;
        width: 100%;
        text-align: left;
        margin-bottom: var(--accordion-button-distance);

        &::before {
            content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="%2361B5C9"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>');
            position: absolute;
            left: 10px;
            top: 50%;
            width: 28px;
            height: 28px;
            color: #61b5c9;
            transform: rotate(45deg) translateY(-50%);
            transform-origin: top;
            transition: transform .2s ease-in-out;
        }

        &.collapsed {
            &::before {
                transform:rotate(0) translateY(-50%);
            }
        }
    }
}

.accordion-item__content {
    margin-top: calc(-1 * var(--accordion-button-distance));
    margin-bottom: var(--accordion-button-distance);
    font-size: 16px;
}