@import '~nprogress/nprogress.css';

@import './themes.scss';
@import './layout.scss';
@import './primer-like.scss';
@import './code-folding.scss';
@import './clippy.scss';
@import './gitee.scss';
@import './github.scss';
@import './keyframes.scss';

$name: gitako;

$min-screen-width: 1280px;
$github-content-width: 1020px;
$side-bar-base-width: $min-screen-width - $github-content-width;
$min-width-with-gitako: $min-screen-width + $side-bar-base-width;

$github-header-z-index: 32;
$github-pull-request-float-header-z-index: 110;
$github-notifications-center-header-z-index: 999;
$minimal-z-index: max(
    $gitee-header-z-index,
    $github-header-z-index,
    $github-pull-request-float-header-z-index,
    $github-notifications-center-header-z-index
  ) + 1;

@mixin hide-for-print {
  @media print {
    display: none;
  }
}

[data-#{$name}-ready='true'] {
  @include code-folding;

  .markdown-body {
    @include clippy;
  }
}

html {
  &[data-with-gitako-spacing='left'] {
    body,
  .AppHeader deferred-side-panel div[data-modal-dialog-overlay] // side panel opened via clicking github top-left icon in global navigation mode
    {
      @media screen {
        margin-left: var(--gitako-width);
      }
    }
  }

  &[data-with-gitako-spacing='right'] {
    body,
    .AppHeader deferred-side-panel div[data-modal-dialog-overlay] {
      @media screen {
        margin-right: var(--gitako-width);
      }
    }
  }
}

// platform-specific overrides
@include gitee($name);
@include github($github-content-width);

.progress-pjax-loader.is-loading {
  left: 0; /* reposition progress bar of GitHub */
}

%hidden {
  display: none;
}

##{$name}-root {
  @include enableThemes;
}

.#{$name}-toggle-show-button-wrapper {
  @include hide-for-print();

  z-index: $minimal-z-index;
  position: fixed;
  top: 124px; // align with GitHub's navbar items
  display: inline-flex;
  align-items: center;
  transition: all 0.25s linear;
  transition-property: left, right;

  &.placement-left {
    left: 0px;

    &.hidden {
      left: -40px;
    }

    .#{$name}-toggle-show-button {
      left: -8px;

      .tentacle {
        transform: translateX(-8px);
      }

      &:active,
      &:hover {
        .tentacle {
          transform: translateX(-4px);
        }
      }
    }
  }

  &.placement-right {
    right: 0;

    &.hidden {
      right: -40px;
    }

    .#{$name}-toggle-show-button {
      left: 8px;

      .tentacle {
        transform: translateX(8px) scale(-1, 1);
      }

      &:active,
      &:hover {
        .tentacle {
          transform: translateX(4px) scale(-1, 1);
        }
      }
    }
  }

  .#{$name}-toggle-show-button {
    @include icon-button(transparent, transparent, transparent);
    background: transparent;
    border: none;
    padding: 0;
    position: relative;

    &.error {
      cursor: not-allowed;
    }

    .tentacle {
      width: 40px;
      height: 40px;
      object-fit: contain;
      transition: all ease 0.4s;
      filter: drop-shadow(0 0 1px var(--color-primer-canvas-backdrop));
    }
    &:active,
    &:hover {
      .tentacle {
        filter: drop-shadow(0 0 2px var(--color-primer-canvas-backdrop));
      }
    }
  }

  .error-message {
    display: none;
    margin-left: 4px;
    padding: 4px;
    font-size: 12px;
    color: var(--color-danger-fg);
    border: 1px solid var(--color-border-default);
    border-radius: 4px;
    background-color: var(--color-bg-subtle);
  }

  &:hover {
    .error-message {
      display: inline-flex;
      align-items: center;
    }
  }
}

.#{$name}-side-bar {
  @include hide-for-print();

  $resizeHandlerWidth: 1px;
  .#{$name}-side-bar-body-wrapper {
    position: fixed;
    top: 0;
    height: 100vh;
    z-index: $minimal-z-index;
    display: flex;

    &.placement-left {
      left: 0;

      &.toggle-mode-float {
        left: 0;
        &.collapsed {
          left: calc(0px - #{$resizeHandlerWidth} - var(--gitako-width));
        }
      }
    }

    &.placement-right {
      right: 0;

      &.toggle-mode-float {
        right: 0;
        &.collapsed {
          right: calc(0px - #{$resizeHandlerWidth} - var(--gitako-width));
        }
      }
    }

    &.toggle-mode-persistent {
      &.collapsed {
        @extend %hidden;
      }
    }

    &.toggle-mode-float {
      transition: all 0.25s cubic-bezier(0.55, 0.06, 0.68, 0.19); // values from Chrome devtools
    }
  }
  .#{$name}-resize-handler {
    display: flex;
    align-items: center;
    cursor: ew-resize;
    user-select: none;
    width: 0;
    background: var(--color-bg-subtle);
    border-right: $resizeHandlerWidth solid var(--color-border-default);
    overflow: hidden;
    box-sizing: content-box;
    &:hover,
    &:active {
      width: 16px;
      background: var(--color-bg-subtle);
      border-left: 1px solid var(--color-border-default);
    }
  }
  .#{$name}-side-bar-body {
    $button-size: 32px;

    position: relative;
    width: var(--gitako-width);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-subtle);
    font-size: 14px;

    .octicon-wrapper {
      display: inline-block;
      color: var(--color-fg-subtle);
      width: 16px;
      min-width: 16px; // prevent shrink when sidebar is narrow
      text-align: center;
    }

    .#{$name}-side-bar-content {
      display: flex;
      flex: 1;
      flex-direction: column;
      min-height: 0; // make content shrinkable

      .header {
        position: relative;
        min-height: 62px; // GitHub header height if login
        background: var(--color-bg-subtle);
        padding: 6px 10px;
        flex-shrink: 0;
        position: relative; // prevent overlap by outline of other elements

        .user-and-repo {
          display: inline; // would be override by CSS rule of section from @primer/css

          li {
            display: inline-flex;
            align-items: center;
            min-height: 32px;
            padding: 4px 0;

            a {
              color: var(--color-accent-fg);
              white-space: normal;
              word-break: normal;
              overflow-wrap: anywhere; // break-word does not break on `_`
            }
          }
        }

        .side-bar-position-controls {
          float: right;
          z-index: 1; // prevent being covered by following elements
        }
      }

      .description-area {
        padding: 4px 10px;
      }

      .loading-indicator-container {
        width: 100%;
        height: 100%;
        border-top: 1px solid var(--color-border-default);
        @include flex-center();

        .loading-indicator {
          display: flex;
          align-items: center;
          color: var(--color-fg-subtle);

          &-icon {
            width: 20px;
            height: 20px;
            margin-right: 4px;

            animation: pulse-rotate 1.8s infinite ease;
          }
        }
      }

      .file-explorer {
        outline: none;
        display: inline-flex;
        flex: 1;
        flex-direction: column;

        .search-input {
          padding-left: 0;

          &:not(.focused) {
            // #282 hack border
            padding-left: 1px;
            border-left: none;
            padding-right: 1px;
            border-right: none;
          }

          .TextInput-icon {
            margin-left: 8px;
          }

          .TextInput-action {
            font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;

            button {
              font-weight: normal;
            }
          }
        }

        .status {
          padding: 4px;
          background: var(--color-bg-subtle);

          .lazy-mode {
            cursor: help;
          }
        }

        .files {
          position: relative;
          flex: 1;
          overflow: hidden;

          &.hidden {
            display: none;
          }

          // Put this inside files will help files to get proper size derived from parents, regardless of its content size
          .magic-size-container {
            position: absolute;
            width: 100%;
            height: 100%;
          }
        }

        .node-item {
          &:hover {
            text-decoration: initial; // revert underline from .gitako-side-bar a:hover
            .node-item-label {
              text-decoration: underline; // apply underline like .gitako-side-bar a:hover
            }
          }

          &.focused {
            @include interactive-background(
              var(--color-canvas-subtle),
              var(--color-canvas-subtle),
              var(--color-canvas-inset)
            );
          }

          @include interactive-background(
            var(--color-canvas-default),
            var(--color-canvas-subtle),
            var(--color-canvas-inset)
          );

          &.disabled {
            pointer-events: none;
            color: var(--color-fg-muted);
          }
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 0;
          line-height: 20px;
          cursor: pointer;
          white-space: nowrap;
          transition: padding 0.3s ease; // on toggle expansion in search results
          color: var(--color-accent-fg);

          border-bottom: 1px solid var(--color-border-muted);
          &.compact {
            border-bottom: none;
            &.focused {
              border-top: 1px solid var(--color-border-muted);
              border-bottom: 1px solid var(--color-border-muted);
            }
          }

          &:not(:hover) {
            color: var(--color-fg-default);
          }

          @mixin icon-size() {
            width: 16px;
            height: 16px;
          }

          .octicon-wrapper:first-child {
            margin-right: 6px;
          }

          &-type-icon {
            margin-right: 4px;
            width: 16px;
            // not specify height here, it'll break vertical alignment

            .octicon.ChevronRight {
              // smooth rotation animation
              transition: transform 0.3s ease;
            }

            & + .octicon-wrapper,
            & + .node-item-icon {
              margin-right: 6px;
            }
          }

          &-icon {
            @include icon-size();
            object-fit: contain;
            vertical-align: text-bottom;
            box-sizing: content-box;

            &.dim {
              filter: sepia(1) hue-rotate(180deg);
            }
          }

          // folder icon rotate when expand
          &.expanded .octicon.ChevronRight {
            transform: rotate(90deg);
          }

          .node-item-label {
            overflow: hidden;
            text-overflow: ellipsis;
            align-items: center;
            font-size: 14px;
          }

          &:not(:hover) {
            .node-item-label .prefix {
              color: var(--color-fg-muted);
            }
          }

          .actions {
            z-index: 1; // prevent being covered by next .node-item
            padding-right: 8px;

            .node-item-comment {
              display: inline-flex;
              align-items: center;
              min-width: 36px;
              padding: 0 4px;
              color: var(--color-fg-muted);

              .octicon-wrapper {
                margin: 2px; // make it closer to the comment amount label
              }
            }

            .node-item-diff {
              display: inline-flex;
              align-items: center;
              padding: 0 4px;
              color: var(--color-fg-muted);

              .octicon-wrapper {
                margin: 0; // make it closer to the diff details
              }

              .added .octicon {
                color: var(--color-success-fg);
              }
              .removed .octicon {
                color: var(--color-danger-fg);
              }
              .renamed .octicon {
                color: var(--color-fg-muted);
              }
              .modified .octicon {
                color: var(--color-attention-fg);
              }
              .ignored .octicon {
                color: var(--color-fg-muted);
              }

              .diff-stat-graph {
                display: inline-block;
                white-space: nowrap;
                > span {
                  display: inline-block;
                  width: 2px;
                  height: 10px;
                  margin: 0 1px;
                  border-radius: 2px;
                }

                .diff-stat-graph-no-change {
                  background: var(--color-fg-muted);
                }

                .diff-stat-graph-addition {
                  background: var(--color-success-fg);
                }

                .diff-stat-graph-deletion {
                  background: var(--color-danger-fg);
                }
              }

              .diff-stat-text {
                display: inline-block;
                white-space: nowrap;
                // Use some commonly available monospace font, the leading ones are copied from GitHub
                font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono,
                  monospace, 'Cascadia Code', 'Courier New', Courier;
                .additions {
                  color: var(--color-success-emphasis);
                }
                .delimiter {
                  color: var(--color-neutral-emphasis);
                }
                .deletions {
                  color: var(--color-danger-emphasis);
                }
              }
            }

            .context-menu,
            .go-to-button,
            .find-in-folder-button {
              @include icon-button();
              width: 28px;
              height: 28px;
              border-radius: 28px;
              white-space: nowrap;
              .octicon-wrapper {
                margin-right: 0;
              }
            }
          }

          &.compact {
            .context-menu,
            .go-to-button,
            .find-in-folder-button {
              border-radius: 4px;
              width: 20px;
              height: 20px;
            }
          }

          &:not(:hover) {
            .context-menu:not(.active),
            .go-to-button,
            .find-in-folder-button {
              display: none;
            }
          }
        }
      }
    }

    .#{$name}-settings-bar {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      z-index: 2;
      overflow: hidden; // prevent box-shadow of children overflow
      background: var(--color-bg-subtle);

      &-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 10px;
        box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14),
          0 3px 3px -2px rgba(0, 0, 0, 0.12);
        z-index: 2;
      }

      &-content {
        padding: 10px 10px;
        flex: 1;
        overflow: auto;
        position: relative;

        .shadow-shelter {
          position: absolute;
          width: 100%;
          height: 10px;
          top: 0;
          left: 0;
          background: var(--color-bg-subtle);
          z-index: 2;
        }
      }
      .link-button {
        cursor: pointer;
        display: inline-block;
        margin-bottom: 4px;
      }
      .hint {
        color: var(--color-fg-subtle);
      }
      .help {
        cursor: help;
      }
      .access-token-input-control {
        display: flex;
        .access-token-input {
          flex: 1;
        }
      }
    }

    .#{$name}-footer {
      flex-shrink: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 2px 6px 2px 10px;
      border-top: 1px solid var(--color-border-muted);

      &-section {
        display: inline-flex;
        gap: 8px;
      }

      .version {
        color: var(--color-fg-muted);
      }
    }
  }
}
