@import '~react-treeview/react-treeview.css';
@import '~file-icons-js/css/style.css';

/* Extension specific */

.__better_github_pr {
    display: none;
    overflow: hidden;

    /* Fallbacks - We will try to use github's colors first */
    --bgpr-background: #fff;
    --bgpr-color: #000;
    --bgpr-border: #e1e4e8;

    --bgpr-filter-background: #efefef;
    --bgpr-filter-color: #666;
    --bgpr-filter-border: #efefef;
    --bgpr-filter-border-focus: #ddd;
    --bgpr-filter-placeholder-color: #777;

    --bgpr-item-hover-background: #efefef;

    --bgpr-file-highlight-background: #ebebeb;
    --bgpr-file-filter-color: #000;
    --bgpr-file-filter-background: #fffbdd;
    --bgpr-file-changes-color: #888;

    --bgpr-addition-color: #2cbe4e;
    --bgpr-deletion-color: #b22;
}

/* Define fallbacks in dark mode */
@media (prefers-color-scheme: dark) {
    .__better_github_pr {
        --bgpr-background: #0d1117;
        --bgpr-color: #bebebe;
        --bgpr-border: #484848;

        --bgpr-filter-background: #42433e;
        --bgpr-filter-color: #fff;
        --bgpr-filter-border: #333;
        --bgpr-filter-border-focus: #000;
        --bgpr-filter-placeholder-color: #fff;

        --bgpr-item-hover-background: #42433e;

        --bgpr-file-highlight-background: #42433e;
        --bgpr-file-filter-color: #333;
        --bgpr-file-filter-background: #e4af3c;
        --bgpr-file-changes-color: #999;
    }
}

._better_github_pr_resizer {
    position: absolute;
    width: 5px;
    height: 100%;
    background: lightgray;
    right: 0;
    top: 0;
    cursor: col-resize;
    opacity: .4;
    transition: opacity .2s ease;
    z-index: 1;
}

._better_github_pr_resizer:hover {
    opacity: 1;
}

.enable_better_github_pr .__better_github_pr {
    display: block;
    position: absolute;
    margin-top: 60px;
    padding: 0 10px 0;
    width: 330px;
    height: calc(100vh - 60px);
    background-color: var(--color-canvas-default, var(--bgpr-background));
    border: 1px solid var(--color-border-default, var(--bgpr-border));
    color: var(--color-fg-default, var(--bgpr-color));
    box-sizing: border-box;
    border-radius: 3px;
}

.__better_github_pr > div {
    height: calc(100% - 55px);
}

.__better_github_pr .file-container {
    overflow: auto;
    height: 100%;
    padding-bottom: 10px;
}

.__better_github_pr .file-container > div {
    width: fit-content;
}

.__better_github_pr .close-button {
    background: none;
    border: none;
    padding: 5px 2px;
}

.__better_github_pr .actions {
    display: flex;
    align-items: center;
    position: relative;
    padding: 10px 0;
    width: 100%;
}
.__better_github_pr .actions button {
    color: var(--color-fg-default, var(--bgpr-color));
}

.__better_github_pr .actions-filter {
    flex: 1;
    padding: 5px 10px;
    border-radius: 4px;
    outline: none;
    background: var(--color-canvas-subtle, var(--bgpr-filter-background));
    color: var(--color-fg-default, var(--bgpr-filter-color));
    border: 1px solid var(--color-border-default, var(--bgpr-filter-border));
    transition: border .2s;
}
.__better_github_pr .actions-filter::placeholder {
    color: var(--color-fg-muted, var(--bgpr-filter-placeholder-color));
}

.__better_github_pr .actions-filter:focus {
    outline: none;
    border: 1px solid var(--color-border-default, var(--bgpr-filter-border-focus));
}

.__better_github_pr .actions-small-button
{
    flex: 0 0 24px;
    padding: 0 5px;
}
.__better_github_pr .actions-small-button:nth-child(2) {
    padding-left: 10px;
}
.__better_github_pr .actions-small-button:last-child {
    padding-right: 0;
}

.__better_github_pr .actions-small-button button
{
    display: block;
    background: none;
    border: none;
    padding: 0;
}

.__better_github_pr_noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

/* GitHub page changes */

.enable_better_github_pr #files,
.enable_better_github_pr .commit.full-commit.prh-commit {
    margin-left: 340px;
}

.enable_better_github_pr .comment-holder {
    max-width: 708px;
}

.enable_better_github_pr .container {
    transition: width .2s ease;
}

/* react-treeview */

.tree-view_item {
    position: relative;
    padding-left: 37px;
    transition: background-color .1s;
}

.tree-view_item:hover {
    background-color: var(--color-accent-subtle, var(--bgpr-item-hover-background));
}

.tree-view_arrow {
    transform: translateY(-1px);
    position: absolute;
    left: 0;
    right: 0;
}

.tree-view_arrow:before {
    content: url("data:image/svg+xml;uff8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 100 125' enable-background='new 0 0 100 100' xml:space='preserve'><polygon stroke='%23adadad' fill='%23ffffff' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points='  82.626,50 17.374,87.674 17.374,12.326 82.626,50 17.374,87.674 17.374,12.326 '/></svg>");
    display: inline-block;
    height: 13px;
    width: 13px;
    vertical-align: middle;
    margin-right: 4px;
    transition: transform .2s;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.tree-view_arrow:after {
    content: url('data:image/svg+xml;uff8,<svg xmlns="http://www.w3.org/2000/svg" class="octicon octicon-file-directory" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill="%238197B0" fill-rule="evenodd" d="M13 4H7V3c0-.66-.31-1-1-1H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1zM6 4H1V3h5v1z"></path></svg>');
    height: 17px;
    width: 17px;
    display: inline-block;
    vertical-align: middle;
}

.tree-view_arrow-collapsed {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;
}

.tree-view_arrow-collapsed:before {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;
}

.github-pr-file {
    white-space: nowrap;
    padding-left: 18px;
    padding-top: 2px;
    padding-bottom: 2px;
    background: transparent;
    font-weight: normal;
}

.github-pr-file.github-pr-file-highlight {
    background: var(--color-accent-subtle, var(--bgpr-file-highlight-background));
}

.github-pr-file.github-pr-file-deleted {
    text-decoration: line-through;
}

.github-pr-file > span {
    margin-right: 4px;
}

.github-pr-file > span.changes > .number {
  color: var(--color-fg-muted, var(--bgpr-file-changes-color));
  margin-left: 8px;
  margin-right: 4px;
}

.github-pr-file span.addition {
    background-color: var(--color-diffstat-addition-bg, var(--bgpr-addition-color));
}

.github-pr-file span.change-block {
    display: inline-block;
    vertical-align: middle;
    height: 6px;
    width: 6px;
    margin-right: 2px;
}

.github-pr-file span.deletion {
    background-color: var(--color-danger-emphasis, var(--bgpr-deletion-color));
}

.github-pr-file-highlight-filter {
    color: var(--bgpr-file-filter-color);
    background: var(--bgpr-file-filter-background);
}

.github-pr-file-comment {
    margin-left: 3px;
    position: relative;
    top: 2px;
}

.github-pr-file-checkmark {
    color: #2cbe4e;
    margin-left: 5px;
}
