.event-ray {
    &__wrap {
        @apply flex flex-col justify-items-stretch w-full space-y-2;
    }

    &__caller {
        &-name {
            @apply text-blue-400 dark:text-blue-100 underline;
        }

        &-code {
            @apply font-semibold break-all;
        }
    }

    &__json {
        @apply text-right;
        margin-top: 0!important;
        margin-bottom: -15px!important;
    }

    &__exception {
        &-wrap {
            @apply p-3 border rounded-t dark:border-gray-400 bg-gray-50 dark:bg-gray-700;
        }

        &-text {
            @apply text-muted text-sm break-all;
        }

        &-files {
            @apply border-b border-l border-r divide-y flex-col justify-center dark:border-gray-400;
        }
    }

    &__mailable {
        &-class {
            @apply text-muted text-sm break-all;
        }

        &-row-text {
           @apply text-muted font-bold
        }
    }

    &__pause {
        @apply flex;
        &-btn {
            @apply px-5 py-2 flex items-center space-x-3 bg-gray-100 dark:bg-gray-800 border dark:border-gray-600 text-sm font-medium hover:bg-gray-50 focus:outline-none disabled:opacity-50;

            &--continue {
                @apply rounded-l-full;
            }

            &--stop {
                @apply border-l-0 rounded-r-full;
            }
        }
    }

    &__query {
        &-snipper {
            @apply border-b-0;
        }
    }

    &__trace {
        &-files {
            @apply flex-col justify-center border dark:border-gray-600 divide-y;
        }
    }

    &__view {
        &-title {
            @apply text-sm md:text-base mb-2;
        }

        &-code {
            @apply font-semibold break-all;
        }
    }
}

.event-ray-file {
       @apply text-xs cursor-pointer border-b border-purple-200 dark:border-gray-600;

    &__header {
       @apply bg-purple-50 dark:bg-gray-800 py-2 px-3 flex space-x-2 justify-between items-start;
    }

    &__title {
        @apply text-muted break-all font-semibold;
    }

    &__icon {
        @apply w-5 h-4 border border-purple-300 shadow bg-white dark:bg-gray-600 py-1 rounded;
    }

    &__body {
        @apply bg-gray-900 p-2 overflow-x-scroll;
    }

    &__snippet {
        @apply flex text-gray-100;
    }
}
