@import './themes/dark';
@import '@gitlab/ui/dist/tokens/css/tokens.dark';
@import 'page_bundles/mixins_and_variables_and_functions';

:root {
  color-scheme: dark;

  --dark-icon-color-purple-1: #524a68;
  --dark-icon-color-purple-2: #715bae;
  --dark-icon-color-purple-3: #9a79f7;
  --dark-icon-color-orange-1: #665349;
  --dark-icon-color-orange-2: #b37a5d;

  --gl-text-color: #{$gray-900};
  --border-color: #{$border-color};

  --gray-light: #{$gray-50};

  --svg-status-bg: #{$white};
}

:root.gl-dark {
  // redefine some colors and values to prevent sourcegraph conflicts
  color-scheme: dark;
  --gray-10: #{$gray-10};
  --border-color: #{$border-color};
  --white: #{$white};
  --black: #{$black};
}

.gl-dark {
  .gl-button.gl-button,
  .gl-button.gl-button.btn-block {
    &.btn-default,
    &.btn-dashed,
    &.btn-info,
    &.btn-success,
    &.btn-danger,
    &.btn-confirm {
      &-tertiary {
        mix-blend-mode: screen;
      }
    }
  }

  .gl-datepicker-theme {
    .pika-prev,
    .pika-next {
      filter: invert(0.9);
    }

    .is-selected > .pika-button {
      color: $gray-900;
    }

    :not(.is-selected) > .pika-button:hover {
      background-color: $gray-200;
    }
  }

  .gl-new-dropdown-item {
    &:active,
    &:hover,
    &:focus,
    &:focus:active {
      .gl-new-dropdown-item-content {
        background-color: $gray-10;
      }
    }
  }
}

// Some hacks and overrides for things that don't properly support dark mode
.gl-label {
  filter: brightness(0.9) contrast(1.1);

  // This applies to the gl-label markups
  // rendered and cached in the backend (labels_helper.rb)
  &.gl-label-scoped {
    .gl-label-text-scoped,
    .gl-label-close.gl-button .gl-icon {
      color: $gray-900;
    }
  }
}

// white-ish text for light labels
.gl-label-text-light.gl-label-text-light {
  &,
  .gl-label-close .gl-icon {
    color: $gray-900;
  }
}

.gl-label-text-light .gl-label-close.gl-button:hover {
  background-color: $gray-900;
}

.gl-label-text-dark.gl-label-text-dark {
  &,
  .gl-label-close .gl-icon {
    color: $gray-10;
  }
}

// This applies to "gl-labels" from "gitlab-ui"
.gl-label.gl-label-scoped.gl-label-text-dark,
.gl-label.gl-label-scoped.gl-label-text-light {
  .gl-label-text-scoped,
  .gl-label-close.gl-button .gl-icon {
    color: $gray-900;
  }
}

.gl-label-text-dark .gl-label-close.gl-button:hover {
  background-color: $gray-10;
}

// duplicated class as the original .atwho-view style is added later
.atwho-view.atwho-view {
  background-color: $white;
  color: $gray-900;
  border-color: $gray-800;
}

.gl-avatar:not(.gl-avatar-identicon),
.avatar-container,
.avatar {
  background: rgba($gray-950, 0.04);
}

.gl-avatar {
  @include gl-border-none;
  box-shadow: inset 0 0 0 1px rgba($gray-950, $gl-avatar-border-opacity);
}

aside.right-sidebar:not(.right-sidebar-merge-requests) {
  background-color: $gray-10;
}

:root.gl-dark {
  .terms {
    .logo-text {
      fill: var(--black);
    }
  }

  .md :not(pre.code) > code {
    background-color: $gray-200;
  }
}

.timeline-entry.internal-note:not(.note-form) .timeline-content,
.timeline-entry.draft-note:not(.note-form) .timeline-content {
  // soften on darkmode
  background-color: mix($gray-50, $orange-50, 75%) !important;
}

.tanuki-bot-chat-drawer .tanuki-bot-message {
  // lightens chat bubble in darkmode as $gray-50 matches drawer background.  See tanuki_bot_chat.scss
  background-color: $gray-100;
}

.ai-genie-chat,
.ai-genie-chat .gl-form-input {
  background-color: $gray-10;
}