@import "../styles";

.m-editor-hints.c-modal,
#panel-get-help {
    .--modal-content {
        padding: 0;
        width: 100%;
        max-width: 1100px;
    }
    header {
        @apply py-16 px-32;
        @apply border-b-1 border-borderColor5;
        @apply flex items-center;

        .c-icon {
            height: 48px;
            width: 48px;
            @apply mr-24;
        }
        h2 {
            @apply text-h3;
        }
    }
    .c-details {
        &:not([open]) {
            .--summary {
                @apply pb-16;
            }
        }

        &[open] {
            @apply pb-12;
            & .--summary {
                @apply pb-4;
            }
        }

        .--summary-inner {
            @apply px-32 pt-16;

            @apply text-h6;
            @apply flex items-center;
            .c-icon {
                @apply ml-auto;
                height: 24px;
                width: 24px;
            }
        }
    }
    .c-textual-content {
        @apply px-32 pb-16;
        & ul {
            @apply ml-0;
            & li {
                @apply text-16 leading-170;
                list-style: disc;
                @apply ml-20;
            }
        }
    }
    .single-task-hints {
        & h3 {
            @apply text-h5 px-32 py-16;
        }
    }
}
