.ac-container {
    margin: 1rem auto 1rem auto;
    text-align: left;

    > input {
        display: none;

        &:checked + label {
            background: var(--button-colored-background);
            color: var(--text-on-background-color-2);

            + section {
                display: inherit;
            }
        }

        + label + section {
            display: none;
        }
    }

    label {
        display: block;
        padding: 1rem 1rem;
        position: relative;
        z-index: 20;
        margin-top: -1px;
        cursor: pointer;
        color: var(--text-on-background-color-2);
        font-size: 1rem;
        border: 1rem solid var(--box-border);
        background: var(--box-border);

        &:hover {
            background: var(--button-colored-background-hover);
        }
    }

    > section {
        background: #fff;
        overflow: hidden;
        height: auto;
        position: relative;
        z-index: 10;
        border-left: 1px solid var(--box-border);
        border-right: 1px solid var(--box-border);
        padding: 1rem;
    }
}

.more-container {
    > label {
        width: 100%;
        display: flex;
        flex-direction: row;
        border-bottom: 1px solid var(--box-border);
        cursor: pointer;
        color: var(--link-color);
        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: block;
            }
        }
    }

    > div {
        display: none;
    }
}