@import 'definitions';
@import 'drawing';

.terminal-window {
  background: transparent;

  &.root {
    $variant: 'dark';
    $window_color: darken(#a51d2d, 15%);
    @import 'recoloring';
  }

  &.remote {
    $variant: 'dark';
    $window_color: darken(#613583, 10%);
    @import 'recoloring';
  }

  scrolledwindow.terminal overshoot {
    $sides: "top", "bottom", "left", "right";

    @each $side in $sides {
      &.#{$side} {
        @include overshoot($side, normal, #cccccc);

        &:backdrop { @include overshoot($side, backdrop, #cccccc); }
      }
    }
  }
}

// Taken from nautilus
.floating-bar {
  padding: 6px;
  background-color: themecolor(theme_base_color);
  border-width: 1px;
  border-style: solid solid none;
  background-clip: padding-box;
  border-color: transparentize(black, if($variant == 'light', .8, .25));
  border-radius: 6px 6px 0 0;

  &:backdrop {
    background-color: themecolor(theme_unfocused_base_color);
  }

  &:dir(rtl) { // axes left border and border radius
    border-left-style: none;
    border-top-left-radius: 0;
  }

  &:dir(ltr) { // axes right border and border radius
    border-right-style: none;
    border-top-right-radius: 0;
  }

  button {
    padding: 0px;
  }
}

.empty-state {
  /* Sync to KgxTerminal! */
  @if $variant == 'light' {
    background: white;
  } @else {
    $bg: rgb(0.05 * 255, 0.05 * 255, 0.05 * 255);

    background: transparentize($bg, 0.04);

    window.opaque & {
      background: $bg;
    }
  }

  color: gtkalpha(currentColor, .5);
}

.exit-info {
  padding: 6px;
  border-top: 2px solid #1e78e4;
  background: rgba(13, 54, 104, 0.96);
  color: #ffffff;

  label:backdrop {
    color: #ffffff;
  }

  .error & {
    border-top: 2px solid #ed333b;
    background: rgba(104, 13, 13, 0.96);
  }
}

label.numeric {
  font-feature-settings: "tnum";
}

box.tab:drop(active) {
  outline: 1px solid $drop_target_color;
  outline-offset: -1px;
  -gtk-outline-radius: 0;

  window:not(.tiled)
        :not(.tiled-top)
        :not(.tiled-bottom)
        :not(.tiled-left)
        :not(.tiled-right)
        :not(.maximized) & {
    -gtk-outline-bottom-left-radius: 8px;
    -gtk-outline-bottom-right-radius: 8px;
  }
}

.process-list row {
  .header {
    min-height: 0;
  }

  .title {
    font-family: Monospace;
  }
}

.tab-button label {
  font-weight: 800;
  font-size: 8pt;

  &.small {
    font-size: 6pt;
  }
}

@mixin flat_round_button() {
  background: none;
  border: none;
  box-shadow: none;
  -gtk-icon-shadow: none;
  text-shadow: none;
  border-radius: 99px;
  -gtk-outline-radius: 99px;
  color: inherit;
  padding: 0;

  &:hover {
    background: gtkalpha(currentColor, .15);

    &:active {
      background: gtkalpha(black, .2);
    }
  }
}

.tab-switcher {
  min-height: 180px;

  list {
    padding-top: 48px;
    padding-bottom: 84px;

    row {
      background: none;
      border: none;
      box-shadow: none;
      padding: 0;
      outline-color: transparent;
      color: themecolor(theme_text_color);

      .content {
        min-height: 40px;
        margin-left: 5px;
        margin-right: 5px;
        margin-bottom: 2px;
        padding: 3px;
        border-radius: 5px;
        -gtk-outline-radius: 5px;
        border: none;
        box-shadow: none;
        transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

        &:dir(ltr) { padding-left: 11px; }
        &:dir(rtl) { padding-right: 11px; }
      }

      &:selected .content {
        background: gtkalpha(currentColor, .06);
      }

      &:hover .content {
        background: gtkalpha(currentColor, .1);
      }

      &:active .content {
        background: gtkalpha(black, .15);
      }

      &.needs-attention {
        // Blue 4 | Blue 1
        color: if($variant == 'light', #1c71d8, #99c1f1);
      }

      .close-btn,
      .indicator-btn {
        @include flat_round_button();
        min-width: 36px;
        min-height: 36px;
      }
    }
  }

  .collapse-button {
    @include flat_round_button();
    padding: 6px 30px;
    margin: 6px;
  }

  .new-tab-button {
    min-width: 48px;
    min-height: 48px;
    border-radius: 100%;
    -gtk-outline-radius: 100%;
    padding: 0;
    margin: 18px;
  }
}

themeswitcher {
  $_light_bg: white;
  $_light_fg: transparentize(black, .1);
  $_dark_bg: #2e3436;
  $_dark_fg: white;
  $_selected_color: #3584e4;

  .check {
    background: $_selected_color;
    color: white;
    padding: 2px;
    border-radius: 17px;
  }

  /* Adapted from https://gitlab.gnome.org/GNOME/gnome-text-editor/-/blob/bf8c0c249f06a0be69e65aed3b786ba02a9f999e/src/TextEditor.css#L51 */
  radiobutton {
    -gtk-outline-radius: 100px;
    outline-offset: 1px;
    transition: none;

    radio {
      -gtk-icon-source: none;
      background: none;
      box-shadow: none;
      padding: 12px;
      min-height: 24px;
      min-width: 24px;
      border: none;
      outline-color: currentColor;
      transition: none;

      @if $high_contrast {
        @if $variant == 'light' {
          box-shadow: inset 0 0 0 1px transparentize(black, .3);
        } @else {
          box-shadow: inset 0 0 0 1px transparentize(white, .7);
        }
      } @else {
        @if $variant == 'light' {
          box-shadow: inset 0 0 0 1px transparentize(black, .8);
        } @else {
          box-shadow: 0 0 0 1px transparentize(black, .3);
        }
      }

      &:checked {
        box-shadow: inset 0 0 0 2px $_selected_color;
      }
    }

    &.system radio {
      color: $_light_fg;
      background: linear-gradient(-45deg, $_dark_bg 49.99%, $_light_bg 50.01%);
    }

    &.light radio {
      color: $_light_fg;
      background-color: $_light_bg;
    }

    &.dark radio {
      color: $_dark_fg;
      background-color: $_dark_bg;
    }
  }
}
