gitlab-org--gitlab-foss/app/assets/stylesheets/page_bundles/merge_conflicts.scss

@import 'mixins_and_variables_and_functions';
@import '../highlight/conflict_colors';

@mixin color-scheme($color) {
  .header.line_content,
  .diff-line-num {
    &.origin {
      background-color: map-get($conflict-colors, #{$color}-header-origin-neutral);
      border-color: map-get($conflict-colors, #{$color}-header-origin-neutral);

      button {
        background-color: map-get($conflict-colors, #{$color}-button-origin-neutral);
        border-color: darken(map-get($conflict-colors, #{$color}-button-origin-neutral), 15);
      }

      &.selected {
        background-color: map-get($conflict-colors, #{$color}-header-origin-chosen);
        border-color: map-get($conflict-colors, #{$color}-header-origin-chosen);

        button {
          background-color: map-get($conflict-colors, #{$color}-button-origin-chosen);
          border-color: darken(map-get($conflict-colors, #{$color}-button-origin-chosen), 15);
        }
      }

      &.unselected {
        background-color: map-get($conflict-colors, #{$color}-header-not-chosen);
        border-color: map-get($conflict-colors, #{$color}-header-not-chosen);

        button {
          background-color: lighten(map-get($conflict-colors, #{$color}-button-origin-neutral), 15);
          border-color: map-get($conflict-colors, #{$color}-button-origin-neutral);
        }
      }
    }

    &.head {
      background-color: map-get($conflict-colors, #{$color}-header-head-neutral);
      border-color: map-get($conflict-colors, #{$color}-header-head-neutral);

      button {
        background-color: map-get($conflict-colors, #{$color}-button-head-neutral);
        border-color: darken(map-get($conflict-colors, #{$color}-button-head-neutral), 15);
      }

      &.selected {
        background-color: map-get($conflict-colors, #{$color}-header-head-chosen);
        border-color: map-get($conflict-colors, #{$color}-header-head-chosen);

        button {
          background-color: map-get($conflict-colors, #{$color}-button-head-chosen);
          border-color: darken(map-get($conflict-colors, #{$color}-button-head-chosen), 15);
        }
      }

      &.unselected {
        background-color: map-get($conflict-colors, #{$color}-header-not-chosen);
        border-color: map-get($conflict-colors, #{$color}-header-not-chosen);

        button {
          background-color: lighten(map-get($conflict-colors, #{$color}-button-head-neutral), 15);
          border-color: map-get($conflict-colors, #{$color}-button-head-neutral);
        }
      }
    }
  }

  .line_content {
    &.origin {
      background-color: map-get($conflict-colors, #{$color}-line-origin-neutral);

      &.selected {
        background-color: map-get($conflict-colors, #{$color}-line-origin-chosen);
      }

      &.unselected {
        background-color: map-get($conflict-colors, #{$color}-line-not-chosen);
      }
    }

    &.head {
      background-color: map-get($conflict-colors, #{$color}-line-head-neutral);

      &.selected {
        background-color: map-get($conflict-colors, #{$color}-line-head-chosen);
      }

      &.unselected {
        background-color: map-get($conflict-colors, #{$color}-line-not-chosen);
      }
    }
  }
}

#conflicts {
  .white {
    @include color-scheme('white'); }

  .dark {
    @include color-scheme('dark'); }

  .monokai {
    @include color-scheme('monokai'); }

  .solarized-light {
    @include color-scheme('solarized-light'); }

  .solarized-dark {
    @include color-scheme('solarized-dark'); }

  .none {
    .line_content.header {
      button {
        color: $gray-900;
      }
    }
  }

  .diff-wrap-lines .line_content {
    white-space: normal;
    min-height: 19px;
  }

  .line_content.header {
    position: relative;

    button {
      border-radius: 2px;
      font-size: 10px;
      position: absolute;
      right: 10px;
      padding: 0;
      outline: none;
      color: var(--white, $white);
      width: 75px; // static width to make 2 buttons have same width
      height: 19px;
    }
  }

  .editor-wrap {
    &.is-loading {
      .editor {
        display: none;
      }

      .loading {
        display: block;
      }
    }

    &.saved {
      .editor {
        border-top: solid 2px var(--green-300, $green-300);
      }
    }

    .editor {
      pre {
        height: 350px;
        border: 0;
        border-radius: 0;
        margin-bottom: 0;
      }
    }

    .loading {
      display: none;
    }
  }

  .discard-changes-alert {
    background-color: var(--gray-10, $gray-10);
    text-align: right;
    padding: $gl-padding-top $gl-padding;
    color: var(--gl-text-color, $gl-text-color);
  }
}