@import 'drawing';

@define-color code_bg_color mix(#{$base_color}, #{$fg_color}, 0.15);

/* Main window and text colors */

#titlebar-revealer {
  padding: 0;
}

.apostrophe-editor {
  text-decoration-color: $error_color;
  font-family: 'Fira Mono', monospace;
  font-size: 1.091em;

  text{
    background: $base_color;
    color: $fg_color; //->text-color?
    caret-color: $fg_color;
  }

    &.size14  {
    font-size: 0.955em;
    }
  
    &.size15  {
    font-size: 1.023em;
    }
  
    &.size16  {
    font-size: 1.091em;
    }
  
    &.size17  {
    font-size: 1.159em;
    }
  
    &.size18 {
    font-size: 1.227em;
    }
  
    &.size20  {
    font-size: 1.364em;
    }
  
    &.size22  {
    font-size: 1.5em;
    }

    &.size24  {
    font-size: 1.636em;
    }
}

.inline-button {
  color: transparentize($fg_color, 0.4);
  background-color: transparentize($base_color, 0.1);
  text-shadow: inherit;
  box-shadow: initial;
  background-clip: initial;
  background-origin: initial;
  background-size: initial;
  background-position: initial;
  background-repeat: initial;
  background-image: initial;
  border-image-source: initial;
  border-image-repeat: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-style: none;
  padding: 0px 16px;
  transition: 100ms ease-in;
}

.inline-button:hover,
.inline-button:checked {
  color: $fg_color;
  background-color: mix($base_color, $bg_color, 0.5);
}


.lexikon {
  font-family: serif;
  font-size: 12px;
  background: $bg_color;
  border: 4px solid $bg_color;

  .header {
    font-size: 14px;
    padding-top: 16px;
    padding-bottom: 4px;
    font-weight: bold;
  }

  .header.first {
    padding-top: 0px;
  }

  .number {
    padding-left: 16px;
    padding-right: 4px;
  }
}

.quick-preview-popup {
  background-color: $bg_color;
  padding: 8px 12px 8px 12px;


  grid {
    background-color: $bg_color;
    color: $fg_color;
    border-color: $bg_color;
  }

  label {
    color: $fg_color;
  }
}

/* theme selector */

.themeswitcher {
  $_light_bg: white;
  $_light_fg: transparentize(black, .1);
  $_dark_bg: #2d2d2d;
  $_dark_fg: #eeeeec;
  $_sepia_bg: #F0E8DD;
  $_sepia_fg: #3b3228;
  $_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: 18px;
      min-width: 18px;
      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;
    }
    &.sepia radio {
      color: $_sepia_fg;
      background-color: $_sepia_bg;
    }
    &.dark radio {
      color: $_dark_fg;
      background-color: $_dark_bg;
    }
  }
}

.preview_button_left:checked{
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-right-style: none;
}

.preview_button_right{
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

/* Recents */
.open-popover {
  contents {
    padding: 0;
  }

  list {
  background:none;
    margin-bottom: 3px;
  }

  list label.placeholder {
    min-height: 57px;
  }

  list row {
    border-radius: 9px;
    margin: 3px 6px;
  }

  list row:first-child {
    margin-top: 6px;
  }

  list row button {
    padding: 3px;
    margin: 0;
    min-height: 24px;
    min-width: 24px;
  }

  list row:hover,
  list row:focus {
    background: transparentize($fg_color, .85);
  }

  separator {
    margin-bottom: 0;
  }
}