@use '@lucas-labs/lui-micro/var' as var;
@use '@lucas-labs/lui-micro/color' as color;

@mixin apply-styles {
    // description, labels, info
    .repo-home-sidebar-top {
        @media (max-width: 768px) {
            border-bottom: 1px solid color.get('elevation/6');
            margin-bottom: var.get('measure/1x');
        }

        form {
            margin-top: 0 !important;
        }

        #repo-topics, #topic_edit, .label-list {
            row-gap: var.get('measure/.5x');
            margin-top: 0 !important;

            .label:not(.basic) {
                font-size: var.get('font-size/sm') !important;
                background-color: rgba(#{color.get('palette/blue/base', 'rgb')}, 0.1);
                color: color.get('primary/base');
                border-radius: var.get('measure/2x');
                line-height: 22px !important;
                padding-top: 0 !important;
                padding-bottom: 0 !important;

                &:hover {
                    background-color: rgba(#{color.get('palette/blue/base', 'rgb')}, 0.3) !important;
                    color: color.get('primary/base') !important;
                }
            }

            .ui.selection.active.dropdown, .ui.selection.active.dropdown .menu {
                border-color: color.get('elevation/6')
            }
        }

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

            +a.flex-text-block {
                svg {
                    color: color.get('subtle') !important;
                }
                margin-bottom: var.get('measure/1x');
            }
        }        

        .flex-text-block {
            gap: var.get('measure/.25x') !important;
            font-size: var.get('font-size/md') !important;

            svg {
                margin-right: var.get('measure/.25x') !important;
            }
        }

        @media (max-width: 768px) {
            .repo-description {
                margin-top: 0 !important;

                +a.flex-text-block {
                    margin-bottom: 0;
                }
            }

            #repo-topics, #manage_topic, .flex-item-title {
                display: none;
            }

            .flex-item-body>div {
                flex: 1;
            }
        }
    }

    // releases + languages section
    .repo-home-sidebar-bottom {
        .flex-list .flex-item .flex-item-main {
            .flex-item {
                padding: 0 !important;

                .flex-item-main {
                    gap: 0 !important;

                    .flex-item-header {
                        * {
                            font-size: var.get('font-size/md') !important;
                        }

                        .flex-item-title {
                            gap: var.get('measure/.5x') !important;
                            .green.label {
                                border-radius: var.get('measure/2x');
                                font-size: var.get('font-size/sm') !important;
                                background-color: transparent !important;
                                border: 1px solid color.get('palette/green/base') !important;
                                color: color.get('palette/green/base') !important;
                            }
                        }
                    }

                    .flex-item-body {
                        .time {
                            font-size: var.get('font-size/sm') !important;
                        }
                    }
                }
            }
        }

        // languages
        .flex-item-body {
            gap: 0 !important;

            .language-stats {
                margin: 0 !important;
                height: var.get('measure/.5x') !important;
                margin-bottom: var.get('measure/.5x') !important;
            }

            .language-stats-details {
                gap: var.get('measure/1x') !important;
                .item {
                    font-size: var.get('font-size/sm') !important;
                    padding: 0;
                    gap: var.get('measure/.25x') !important;

                    .color-icon {
                        height: var.get('measure/.5x') !important;
                        width: var.get('measure/.5x') !important;
                        margin-right: var.get('measure/.25x') !important;
                    }
                }
            }
        }
    }

    .repo-home-sidebar-bottom, .repo-home-sidebar-top {
        padding-left: var.get('measure/1.5x');

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

        .flex-item-title .item {
            display: flex;
            flex-wrap: nowrap;
            gap: var.get('measure/.5x');
            text-decoration: none;

            .small.label {
                background-color: color.get('elevation/7');
                border: 1px solid color.get('elevation/7');
                border-radius: var.get('measure/2x');
                color: color.get('text');
                font-weight: var(--base-text-weight-medium, 500);
                min-width: 20px;
                padding: 2px;
                text-align: center;
                align-items: center;
                justify-content: center;
            }
        }

        >.flex-list>.flex-item {
            padding-top: var.get('measure/1x');
            padding-bottom: var.get('measure/1x');

            >.flex-item-main {
                gap: var.get('measure/1x');
            }
        }
    }

    button.ui.primary.button.js-btn-clone-panel {
        display: flex;
        flex-wrap: nowrap;
        gap: var.get('measure/.5x');
        align-items: center;

        span {
            display: flex;
            flex-wrap: nowrap;
            gap: var.get('measure/.375x');
            align-items: center;
        }
    }

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

        .clone-panel-list {
            margin: var.get('measure/1x');

            .item {
                margin: var.get('measure/.5x') 0;
            }
        }

        .clone-panel-tab {
            padding: 0 var.get('measure/1x') var.get('measure/.5x');
            display: flex;
            gap: var.get('measure/.5x');

            button {
                padding: var.get('measure/.375x') var.get('measure/.5x');
                font-weight: 600;

                &.active {
                    border-bottom: 0;
                    position: relative;

                    &:after {
                        content: '';
                        display: block;
                        position: absolute;
                        bottom: -7px;
                        left: 0;
                        width: 100%;
                        height: 2px;
                        background-color: color.get('primary/base');
                    }
                }

                &:hover {
                    background-color: var(--color-hover);
                    border-radius: var(--border-radius);
                    transition: background 0.12s ease-out;
                    text-decoration: none;
                }
            }
        }
    }

    .tippy-svg-arrow {
        display: none;
    }

    .repository.file.editor .commit-form-wrapper .commit-form:before, .repository.file.editor .commit-form-wrapper .commit-form:after {
        display: none;
    }
}