@use '@lucas-labs/lui-micro/var' as var;
@use '@lucas-labs/lui-micro/color' as color;
@use '../../components/button' as button;
@use './issue-sidebar';

@mixin apply-styles {
    .issue-content-right {
        @include issue-sidebar.sidebar;
    }

    .issue-title-header {
        margin-bottom: var.get('measure/1.5x');
        padding-bottom: var.get('measure/.75x');
        border-bottom: 1px solid color.get('elevation/5');

        .issue-title {
            .index {
                font-weight: 300;
            }
        }

        .issue-title-meta {
            color: color.get('subtle');
        }

        &:has(+ .ui.pull.tabs) { // if the next sibling is a tab (e.g. pull request tab selector)
            margin-bottom: var.get('measure/1x');
            padding-bottom: var.get('measure/.5x');
            border-bottom: none;
        }
    }

    .issue-content {
        column-gap: var.get('measure/1.5x');
    }

    .issue-content-left {
        .timeline-avatar img {
            border-radius: 50% !important;
        }   
    }

    .timeline-item {
        &.event {
            .badge {
                // and not contains a tw-bg-* class
                &:not([class*="tw-bg-"]) {
                    color: var(--color-timeline-badge-fg) !important;
                }

                &.tw-bg-green.tw-text-white {
                    color: var(--color-green-contrast) !important;
                }

                &.tw-bg-red.tw-text-white {
                    color: var(--color-red-contrast) !important;
                }
            }

            .ui.segments.conversation-holder {
                margin-left: var.get('measure/.5x');
                border-radius: var(--border-radius);
            }
        }

        &.comment {
            // comment form at the end
            &.form:not(.issue-content) {
                display: flex;
                align-items: flex-start;
                background-color: var(--color-body);
                gap: var.get('measure/1x');
                left: -68px !important;
                width: calc(100% + 68px - 16px) !important;

                @media (max-width: 768px) {
                    left: 0 !important;
                    margin-left: -16px !important;
                    width: auto !important;
                }

                .timeline-avatar {
                    display: block;
                    position: relative !important;
                    left: unset !important;
                    flex: 0 0 auto !important;
                }

                .content {
                    // fake title to mimic github new issue page
                    &:before {
                        display: block;
                        content: 'Add a comment';
                        font-weight: 600;
                        margin-bottom: var.get('measure/1x');
                        margin-top: var.get('measure/.5x');
                        font-size: var.get('font-size/lg');
                    }

                    display: block;
                    position: relative !important;
                    margin-left: 0 !important;
                    flex: 1;

                    .ui.segment {
                        padding: 0 !important;
                        border: none !important;
                    }
                }
            }
        }
    }

    .repository.view.issue {
        --avatar-size: 24px;

        .comment-list .ui.comments {
            background-color: transparent;
            gap: var.get('measure/1x');
            position: relative;
        }

        .comment-list {
            .ui.comment-code-cloud.segment {
                padding: 0 var.get('measure/.5x') var.get('measure/.5x') !important;

                .ui.comments {
                    gap: var.get('measure/.5x');

                    &:before {
                        display: block;
                        content: "";
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        left: calc((var(--avatar-size) / 2) - 1px);
                        top: 16px;
                        width:  3px;
                        background-color: var(--color-timeline);
                        opacity: 50%;
                    }

                    .comment.code-comment .content.comment-container{
                        background-color: transparent !important;

                        .header.comment-header {
                            .comment-header-left {
                                gap: var.get('measure/.5x');
                                .avatar img {
                                    z-index: 1 !important;
                                    width: var(--avatar-size) !important;
                                    height: var(--avatar-size) !important;
                                }
                            }
                        }
                    }
                }

                .code-comment-buttons {
                    margin: 0!important;
                }

                .comment-form {
                    margin-top: var.get('measure/1x');

                    .field.footer {
                        margin: 0 !important;
                        padding: 0 !important;

                        button {
                            padding: var.get('measure/.5x') var.get('measure/1x') !important;
                        }
                    }
                }
            }
        }
    }

    .repository .ui.tabs.divider {
        margin-bottom: var.get('measure/1x');
    }

    .repository .diff-detail-box { // diff page detail box
        padding: var.get('measure/.5x') 0;
        height: 60px;
    }

    .repository.view.issue .pull.tabs.container {
        + div {
            >.diff-detail-box:first-child {
                margin: calc(var.get('measure/1x') * -1) 0 0 0;
            }
        }
    }

    .repository #diff-container {
        #diff-file-tree {
            top: 60px;
            .diff-file-tree-items {
                margin: 0;
            }
        }

        column-gap: var.get('measure/1x');

        .diff-file-body tr.tag-code:last-child td:first-child, .diff-file-body tr.tag-code:last-child td:first-child * {
            border-bottom-left-radius: calc(var(--border-radius) - 2px);
        }

        .diff-file-body tr.tag-code:last-child td:last-child, .diff-file-body tr.tag-code:last-child td:last-child * {
            border-bottom-right-radius: var(--border-radius);
        }

        .ui.attached.header.diff-file-header.sticky-2nd-row {
            position: sticky;
            top: 60px;
            z-index: 7;
        }

        .add-comment {
            border-top: 1px solid var(--color-secondary);
            border-bottom: 1px solid var(--color-secondary);
            
            .conversation-holder {
                .comment-code-cloud {
                    padding: var.get('measure/.75x') !important;
                    form {
                        &:not(:first-child) {
                            margin-top: var.get('measure/.5x');
                        }
                        
                        .field.footer {
                            margin: 0 !important;
                            padding: 0 !important;

                            button {
                                padding: var.get('measure/.5x') var.get('measure/1x') !important;
                            }
                        }
                    }
                }
            }
        }
    }

    // new issue page
    .page-content.repository.new.issue {
        .issue-content-left {
            .ui.comments .comment {
                .ui.segment.content {
                    padding: 6px 0 0;
                    border: none;

                    .field {
                        margin-bottom: var.get('measure/1x');
                    }

                    &:before, &:after {
                        display: none;
                    }
                }
            }
        }
    }        
}