cssOMS/accordion.scss

.ac-container {
    text-align: left;
    border: 1px solid var(--bborder);

    > input {
        display: none;

        &:checked + label {
            background: var(--btn-bg);
            color: var(--txt-on-bg-c-2);

            + section {
                display: inherit;
            }

            &:hover {
                background: var(--btn-bg-hover);
            }
        }

        + label + section {
            display: none;
        }
    }

    label {
        display: block;
        padding: 1rem 1rem;
        position: relative;
        z-index: 20;
        margin-top: -1px;
        cursor: pointer;
        color: var(--default-c);
        font-size: 1rem;
        background: var(--bborder);

        &:hover {
            color: var(--txt-on-bg-c-2);
            background: var(--btn-bg-hover);
        }
    }

    > section {
        background: var(--box-bg);
        overflow: hidden;
        height: auto;
        position: relative;
        z-index: 10;
        padding: 1rem;
    }
}

.more-container {
    > label {
        width: 100%;
        display: flex;
        flex-direction: row;
        border-bottom: 1px solid var(--bborder);
        cursor: pointer;
        color: var(--link-c);
        user-select: none;

        .expand {
            transition: all .3s ease;
            transform: rotateZ(0deg);
        }

        span {
            flex-grow: 1;
        }

        i {
            flex-grow: 0;
        }
    }

    > input {
        display: none;
    }

    > input {
        &:checked {
            + label {
                border-bottom: none;
                margin-bottom: 1rem;

                .expand {
                    transition: all .3s ease;
                    transform: rotateZ(90deg);
                }
            }

            ~ div {
                display: flex;
            }
        }
    }

    > div {
        display: none;
    }
}