.toggle {
    .toggle__item {
        padding: 20px;
        border-bottom: 1px solid var(--wp--preset--color--tertiary);

        &:first-child {
            border-top: 1px solid var(--wp--preset--color--tertiary);
        }
    }

    .toggle__item__title {
        font-size: 1.875rem;
        font-weight: bold;
        line-height: calc(40 / 30);
        padding: 0 140px 0 0;
        position: relative;
        margin: 0;
        transition: all 0.2s ease-in-out 0.1s;
        cursor: pointer;

        @media(width < 768px) {
            font-size: 1.25rem;
            line-height: calc(30 / 20);
            padding: 0 65px 0 0;
        }

        span {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translate3d(0, -50%, 0);
            width: 30px;
            height: 30px;
            display: block;

            &:after {
                content: "";
                position: absolute;
                top: 50%;
                right: 50%;
                width: 15px;
                height: 2px;
                background-color: var(--wp--preset--color--primary);
                transform: translate3d(50%, 0, 0);
            }

            &:before {
                content: "";
                position: absolute;
                top: 50%;
                right: 50%;
                width: 15px;
                height: 2px;
                background-color: var(--wp--preset--color--primary);
                transform: translate3d(50%, 0, 0) rotate(90deg);
                transition: all 0.3s ease-in-out;
            }
        }

        &.active {
            margin: 0 0 20px 0;

            span {
                &:before {
                    transform: translate3d(50%, 0, 0) rotate(0deg);
                }
            }
        }
    }

    .toggle__item__content {
        transition: all 0.3s ease-in-out;
        height: 0;
        overflow: hidden;

        &.active {}
    }
}