// -------
// Please see `app/assets/stylesheets/page_bundles/ide_themes/README.md` for a guide on contributing new themes
// -------
.ide {
  $bs-input-focus-border: #80bdff;
  $bs-input-focus-box-shadow: rgba(0, 123, 255, 0.25);

  a:not(.btn),
  .btn-link:hover,
  .btn-link:focus,
  .btn-link:active {
    color: var(--ide-link-color, $blue-600);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  code,
  .md table:not(.code),
  .md,
  .md p,
  .context-header > a,
  input,
  textarea,
  .dropdown-menu li button,
  .dropdown-menu-selectable li a.is-active,
  .dropdown-menu-inner-title,
  .bs-callout,
  .ide-pipeline .top-bar,
  .ide-pipeline .top-bar .controllers .controllers-buttons,
  .controllers-buttons svg,
  .nav-links li a.active,
  .md-area.is-focused {
    color: var(--ide-text-color, $gl-text-color);
  }

  .badge.badge-pill {
    color: var(--ide-text-color, $gray-700);
    background-color: var(--ide-background, $badge-bg);
  }

  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a,
  .dropdown-menu-inner-content,
  .file-row .file-row-icon svg,
  .file-row:hover .file-row-icon svg {
    color: var(--ide-text-color-secondary, $gl-text-color-secondary);
  }

  .nav-links:not(.quick-links) li:not(.md-header-toolbar) {
    &:hover a,
    &.active a,
    a:hover,
    a.active {
      &,
      .badge.badge-pill {
        color: var(--ide-text-color, $black);
        border-color: var(--ide-input-border, $gray-darkest);
      }
    }
  }

  .drag-handle:hover {
    background-color: var(--ide-dropdown-hover-background, $white-normal);
  }

  .card-header {
    background-color: var(--ide-background, $white);

    .badge.badge-pill {
      background-color: var(--ide-dropdown-hover-background, $badge-bg);
    }
  }

  .text-secondary {
    color: var(--ide-text-color-secondary, $gl-text-color-secondary) !important;
  }

  input[type='search']::placeholder,
  input[type='text']::placeholder,
  textarea::placeholder {
    color: var(--ide-input-border, $gl-text-color-tertiary);
  }

  .dropdown-input .fa,
  .dropdown-input .dropdown-input-clear {
    color: var(--ide-input-border, $dropdown-input-fa-color);
  }

  .ide-nav-form .input-icon {
    color: var(--ide-input-border, $dropdown-input-fa-color);
  }

  code {
    background-color: var(--ide-background, $gray-100);
  }

  .bs-callout,
  .ide-pipeline .top-bar,
  .ide-terminal .top-bar {
    background-color: var(--ide-background, $gray-light);
  }

  .bs-callout {
    border-color: var(--ide-dropdown-background, $border-color);

    code {
      background-color: var(--ide-dropdown-background, $gray-100);
    }
  }

  .common-note-form .md-area {
    border-color: var(--ide-input-border, $border-color);
  }

  .md table:not(.code) tr th {
    background-color: var(--ide-highlight-background, $gray-100);
  }

  &,
  .card,
  .common-note-form .md-area {
    background-color: var(--ide-highlight-background, $white);
  }

  .card,
  .card-header,
  .ide-terminal .top-bar,
  .ide-pipeline .top-bar {
    border-color: var(--ide-border-color, $border-color);
  }

  hr {
    border-color: var(--ide-border-color, darken($gray-normal, 8%));
  }

  .md h1,
  .md h2,
  .md blockquote,
  .md table:not(.code) tbody td,
  .md table:not(.code) tr th,
  .nav-links:not(.quick-links),
  .common-note-form .md-area.is-focused .nav-links {
    border-color: var(--ide-border-color-alt, $white-dark);
  }

  pre {
    border-color: var(--ide-border-color-alt, $gray-100);

    code {
      background-color: var(--ide-border-color, inherit);
    }
  }

  // highlight accents (based on navigation theme) should only apply
  // in the default white theme and "none" theme.
  &:not(.theme-white):not(.theme-none) {
    .ide-sidebar-link.active {
      color: var(--ide-highlight-accent, $gl-text-color);
      box-shadow: inset 3px 0 var(--ide-highlight-accent, $gl-text-color);

      &.is-right {
        box-shadow: inset -3px 0 var(--ide-highlight-accent, $gl-text-color);
      }
    }

    .nav-links li.active a,
    .nav-links li a.active {
      border-color: var(--ide-highlight-accent, $gl-text-color);
    }

    .dropdown-menu .nav-links li a.active {
      border-color: var(--ide-highlight-accent, $gl-text-color);
    }

    // for other themes, suppress different avatar default colors for simplicity
    .avatar-container {
      &,
      .avatar {
        color: var(--ide-text-color, $gl-text-color);
        background-color: var(--ide-highlight-background, $white);
        border-color: var(--ide-highlight-background, rgba($black, $gl-avatar-border-opacity));
      }
    }
  }

  input[type='text'],
  input[type='search'],
  .filtered-search-box {
    border-color: var(--ide-input-border, $border-color);
    background: var(--ide-input-background, $white) !important;
  }

  input[type='text']:not([disabled]):not([readonly]):focus,
  .md-area.is-focused {
    border-color: var(--ide-input-border, $bs-input-focus-border);
    box-shadow: 0 0 0 3px var(--ide-dropdown-background, $bs-input-focus-box-shadow);
  }

  input[type='text'],
  input[type='search'],
  .filtered-search-box,
  textarea {
    color: var(--ide-input-color, $gl-text-color) !important;
  }

  .filtered-search-box input[type='search'] {
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .filtered-search-token .value-container,
  .filtered-search-term .value-container {
    background-color: var(--ide-dropdown-hover-background, $white-normal);
    color: var(--ide-text-color, $gl-text-color);

    &:hover {
      background-color: var(--ide-input-border, $gray-100);
    }
  }

  @function calc-btn-hover-padding($original-padding, $original-border: 1px) {
    @return calc(#{$original-padding + $original-border} - var(--ide-btn-hover-border-width, #{$original-border}));
  }

  .btn:not(.btn-link):not([disabled]):hover {
    border-width: var(--ide-btn-hover-border-width, 1px);
    padding: calc-btn-hover-padding(6px) calc-btn-hover-padding(10px);
  }

  .btn:not([disabled]).btn-sm:hover {
    padding: calc-btn-hover-padding(4px) calc-btn-hover-padding(10px);
  }

  .btn:not([disabled]).btn-block:hover {
    padding: calc-btn-hover-padding(6px) 0;
  }

  .btn-default,
  .dropdown,
  .dropdown-menu-toggle {
    background-color: var(--ide-input-background, $white) !important;
    color: var(--ide-input-color, $gl-text-color) !important;
    border-color: var(--ide-btn-default-border, $border-color);
  }

  .dropdown-menu-toggle {
    border-color: var(--ide-btn-default-border, $gray-darkest);

    &:hover,
    &:focus {
      background-color: var(--ide-dropdown-btn-hover-background, $gray-darker) !important;
      border-color: var(--ide-dropdown-btn-hover-border, $gray-darkest) !important;
    }
  }

  // In IDE, the only inverted buttons are `.btn-remove`
  .btn-inverted.btn-remove {
    color: var(--ide-input-color, $red-500) !important;
    background-color: var(--ide-input-background, $white) !important;
    border-color: var(--ide-btn-default-border, $red-500);

    &:hover,
    &:focus {
      color: var(--ide-input-color, $red-700) !important;
      background-color: var(--ide-input-background, $red-100) !important;
      border-color: var(--ide-btn-default-hover-border, $red-500) !important;
    }

    &:active {
      color: var(--ide-input-color, $red-800) !important;
      background-color: var(--ide-input-background, $red-200) !important;
      border-color: var(--ide-btn-default-hover-border, $red-600) !important;
    }
  }

  .btn-default {
    &:hover,
    &:focus {
      border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important;
      background-color: var(--ide-input-background, $white-normal) !important;
    }

    &:active,
    .active {
      border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important;
      background-color: var(--ide-input-background, $white-dark) !important;
    }
  }

  .dropdown-menu {
    color: var(--ide-text-color, $gl-text-color);
    border-color: var(--ide-background, $border-color);
    background-color: var(--ide-dropdown-background, $white);

    .nav-links:not(.quick-links) {
      background-color: var(--ide-dropdown-hover-background, $white);
      border-color: var(--ide-dropdown-hover-background, $border-color);
    }

    .divider {
      background-color: var(--ide-dropdown-hover-background, $gray-100);
      border-color: var(--ide-dropdown-hover-background, $gray-100);
    }

    li > a:not(.disable-hover):hover,
    li > a:not(.disable-hover):focus,
    li button:not(.disable-hover):hover,
    li button:not(.disable-hover):focus,
    li button.is-focused {
      background-color: var(--ide-dropdown-hover-background, $gray-darker);
      color: var(--ide-text-color, $gl-text-color);
    }
  }

  .dropdown-title,
  .dropdown-input {
    border-color: var(--ide-dropdown-hover-background, $gray-100) !important;
  }

  .btn-primary,
  .btn-info {
    background-color: var(--ide-btn-primary-background, $blue-500);
    border-color: var(--ide-btn-primary-border, $blue-600) !important;

    &:hover,
    &:focus {
      background-color: var(--ide-btn-primary-background, $blue-600);
      border-color: var(--ide-btn-primary-hover-border, $blue-700) !important;
    }

    &:active,
    &.active {
      background-color: var(--ide-btn-primary-background, $blue-700);
      border-color: var(--ide-btn-primary-hover-border, $blue-800) !important;
    }
  }

  .btn-success {
    background-color: var(--ide-btn-success-background, $green-500);
    border-color: var(--ide-btn-success-border, $green-600) !important;

    &:hover,
    &:focus {
      background-color: var(--ide-btn-success-background, $green-600);
      border-color: var(--ide-btn-success-hover-border, $green-700) !important;
    }

    &:active,
    &.active {
      background-color: var(--ide-btn-success-background, $green-700);
      border-color: var(--ide-btn-success-hover-border, $green-800) !important;
    }
  }

  .btn[disabled] {
    background-color: var(--ide-btn-default-background, $gray-light) !important;
    border: 1px solid var(--ide-btn-disabled-border, $gray-100) !important;
    color: var(--ide-btn-disabled-color, $gl-text-color-disabled) !important;
  }

  .md table:not(.code) tbody {
    background-color: var(--ide-border-color, $white);
  }

  .animation-container {
    [class^='skeleton-line-'] {
      background-color: var(--ide-animation-gradient-1, $gray-100);

      &::after {
        background-image: linear-gradient(to right,
        var(--ide-animation-gradient-1, $gray-100) 0%,
        var(--ide-animation-gradient-2, $gray-10) 20%,
        var(--ide-animation-gradient-1, $gray-100) 40%,
        var(--ide-animation-gradient-1, $gray-100) 100%);
      }
    }
  }

  .idiff.addition {
    background-color: var(--ide-diff-insert, $line-added-dark);
  }

  .idiff.deletion {
    background-color: var(--ide-diff-remove, $line-removed-dark);
  }

  ~ .popover {
    box-shadow: none;
  }
}

.navbar:not(.theme-white):not(.theme-none) {
  border-bottom-color: transparent;
}