@reference "tailwindcss";

:root {
    --tk-text: black;
    --code-block-text: #333; /* 调整为深色但在浅色背景下仍然舒适的值 */
}

html.dark {
    --tk-text: #d1d5db;
    --code-block-text: #d1d5db; /* 在深色模式下使用更亮的颜色 */
}

.tk-comments {
    @apply text-(--tk-text);
}

.tk-submit {
    .tk-avatar {
        @apply hidden;
    }
}

/* Text Area */
.tk-row {
    .tk-col {
        @apply flex-col-reverse;
        .tk-input {
            textarea {
                @apply rounded-(--radius-large) py-4 px-6 min-h-[150px]! focus:border-(--primary);
            }
        }
    }
}

/* Meta */
.tk-meta-input {
    @apply relative mt-3;
    div {
        @apply min-h-10;
        .el-input-group__prepend {
            @apply bg-inherit! rounded-l-lg;
            min-height: inherit;
        }
        input {
            @apply px-4 rounded-r-lg focus:border-(--primary)!;
            min-height: inherit;
        }
    }
}

/* Button */
.tk-row.actions {
    @apply w-full ml-0! mt-0!;
    .__markdown {
        @apply hidden!;
    }
    .tk-preview,
    .tk-send,
    .tk-cancel {
        @apply border-none rounded-lg px-3 py-0 h-8
             bg-(--btn-regular-bg-active)! disabled:bg-(--btn-regular-bg)!
            text-(--btn-content)! disabled:text-[#ffffffa1]!;
    }
}

/* Comment title */
.tk-comments-title {
    .__comments svg {
        @apply fill-(--primary);
    }
}

.tk-comment {
    @apply border border-[rgba(144,147,153,0.31)] p-4 rounded-2xl hover:shadow-md transition-all;
    .tk-action-icon svg {
        @apply fill-(--primary);
    }
}

.tk-action {
    .tk-action-count {
        @apply text-(--btn-content);
    }
}

.tk-meta {
    .tk-tag {
        @apply border-none rounded-lg text-(--btn-content);
    }

    .tk-tag-green {
        @apply bg-(--btn-regular-bg) dark:bg-(--primary) dark:text-(--deep-text);
    }
}

/* Content & Preview */
.tk-content,
.tk-preview-container {
    /* by @microsic
        Make the picture type emoticons display without wrapping
    */
    img {
        @apply inline align-bottom!;
    }

    a {
        @apply underline text-(--primary) font-medium;
    }

    .tk-ruser {
        @apply no-underline;
    }

    :not(pre) > code {
        @apply bg-(--inline-code-bg) rounded-md text-[--inline-code-color] px-1 py-0.5 font-semibold;
    }

    li {
        @apply before:content-["•"] before:text-(--primary);
    }
}

/* Replies */
.tk-replies {
    .tk-comment {
        @apply bg-(--page-bg);
        .tk-content {
            > span:first-of-type {
                @apply text-xs;
            }
        }
    }
}

.twikoo .code-block {
    pre {
        @apply rounded-xl!;
    }

    /* Code block fall back */
    pre:not([class]) {
        @apply bg-(--codeblock-bg) overflow-auto p-2 text-(--code-block-text);
    }

    .copy-btn-icon {
        width: inherit !important;
        height: inherit !important;
    }
}

.tk-expand-wrap .tk-expand,
.tk-collapse-wrap .tk-expand {
    @apply hover:rounded-lg mt-1 hover:bg-(--btn-plain-bg-hover);
}

/* by @SirTamago
Make the emoji component display correctly when there are too many emoji packs
*/
.card-base {
    overflow: visible;
}

/* 防止 Twikoo 操作时的意外滚动 */
.tk-action-icon,
.tk-owo,
.tk-submit,
.tk-cancel,
.tk-preview,
.tk-admin,
.tk-delete,
.tk-edit {
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 确保点击区域足够大 */
.tk-action {
    min-height: 24px;
    display: flex;
    align-items: center;
}

/* 防止表单提交时的意外跳转 */
.tk-submit-wrapper {
    position: relative;
}

/* 管理面板样式优化 */
.tk-admin-panel {
    position: relative;
    z-index: 100;
}