@import 'ubuntu-colors';

$small_radius: 4px;
$_headerbar_button_bg: lighten($headerbar_bg_color, 4%);
$_dark_border_color: rgb(20, 19, 19);;

// copied from drawing, modified the gradients here to have less diff in drawing
@mixin yaru_headerbar_fill($c:$headerbar_color, $hc:$top_hilight, $ov: none) {
  //
  // headerbar fill
  //
  // $c:  base color
  // $hc: top highlight color
  // $ov: a background layer for background shorthand (hence no commas!)
  //
  $gradient: linear-gradient(to top, darken($c, 0%), lighten($c, 0%));

  @if $ov !=none {
    background: $c $ov, $gradient;
  }

  @else {
    background: $c $gradient;
  }

  box-shadow: inset 0 1px $hc; // top highlight
  border-color: if($c==$suggested_bg_color, $c, darken($c, 7%));
}

// helper mixin for the yaru titlebuttons
@mixin draw_circle($c, $size:24px) {
  $button_size: $size + 2px * 2;
  $circle_size: 20px / $button_size / 2;

  background-image: -gtk-gradient(radial,
                                  center center, 0,
                                  center center, $circle_size,
                                  to($c),
                                  to(transparent));

  &:hover {
    $_bg: if($c!=$selected_bg_color, transparentize(white, 0.8), lighten($c, 3%));
    background-image: -gtk-gradient(radial,
                                    center center, 0,
                                    center center, $circle_size,
                                    to($_bg),
                                    to(transparent));

    &:backdrop {
      $_bg: transparentize(white, 0.9);
      background-image: -gtk-gradient(radial,
                                      center center, 0,
                                      center center, $circle_size,
                                      to($_bg),
                                      to(transparent));
    }
  }

  &:active {
    $_bg: if($c!=$selected_bg_color, transparentize(white, 0.9), darken($c, 2%));
    background-image: -gtk-gradient(radial,
                                    center center, 0,
                                    center center, $circle_size,
                                    to($_bg),
                                    to(transparent));
  }
}

$_btn_backdrop_border: darken($headerbar_border_color, 3%);

// overwriting the headerbar styling from common, for the inverted look in the light theme
headerbar,
.titlebar {
  @include yaru_headerbar_fill($headerbar_bg_color, $hc: $headerbar_border_color);
  color: $headerbar_fg_color;

  label .title {
    color: $headerbar_fg_color;
  }

  &:backdrop {
    border-color: mix(darken($inkstone, 11%), darken($inkstone, 1%), 80%);
    background-color: $backdrop_headerbar_bg_color;
    box-shadow: inset 0 1px $headerbar_border_color;
  }

  .maximized &,
  .fullscreen & {
    box-shadow: none;
  }

  button,
  button.image-button,
  button.image-button.toggle,
  button.text-button,
  button.toggle,
  box button.toggle,
  buttonbox.toggle,
  stackswitcher button,
  filechooser .path-bar.linked>button,
  .path-bar button {
    $_btn_backdrop_border: darken($headerbar_border_color, 3%);

    @include button(normal, $_headerbar_button_bg, $headerbar_fg_color);

    &.flat {
      @include button(undecorated);
    }

    &:hover {
      @include button(hover, lighten($headerbar_bg_color, 8%), $headerbar_fg_color);
    }

    &:active,
    &:checked,
    &.toggle:checked,
    &.toggle:active {
      $_bg: lighten($headerbar_bg_color, if($variant==light, 0%, 1%));
      @include button(active, $_bg, $headerbar_fg_color);
      border-color: rgb(20, 19, 19);
      background-image: image(darken($_bg, 9%));
    }

    &:backdrop {

      &.flat,
      & {
        @include button(backdrop, $backdrop_headerbar_bg_color, $backdrop_headerbar_fg_color);

        -gtk-icon-effect: none;
        border-color: $_btn_backdrop_border;

        &:active,
        &:checked {
          $_bg: if($variant=='light', darken($backdrop_headerbar_bg_color, 9%), lighten($backdrop_headerbar_bg_color, 2%));
          @include button(backdrop-active, $_bg, $backdrop_headerbar_fg_color);
          border-color: $_btn_backdrop_border;
        }

        &:disabled {
          @include button(backdrop-insensitive, if($variant=='light', darken($headerbar_bg_color, 15%), $headerbar_bg_color), $backdrop_headerbar_fg_color);

          border-color: $_btn_backdrop_border;

          &:active,
          &:checked {
            @include button(backdrop-insensitive-active, $backdrop_headerbar_bg_color, $backdrop_headerbar_fg_color);

            border-color: $_btn_backdrop_border;
          }
        }
      }
    }

    &:disabled {
      @include button(insensitive, if($variant=='light', darken($headerbar_bg_color, 10%), $headerbar_bg_color), $headerbar_fg_color);
      border-color: darken($headerbar_bg_color, 6%);

      &:active,
      &:checked {
        @include button(insensitive-active, $headerbar_bg_color, $headerbar_fg_color);
      }
    }

    // Suggested and Destructive Action buttons, need to overwrite them again here
    // copied from common, disabled buttons bg color changed to match the headerbar
    @each $b_type,
    $b_color in (suggested-action, $suggested_bg_color),
    (destructive-action, $destructive_color) {
      &.#{$b_type} {
        @include button(normal, $b_color, black);

        &.flat {
          @include button(undecorated);

          color: $b_color;
        }

        &:hover {
          @include button(hover, $b_color, black);
        }

        &:active,
        &:checked {
          @include button(active, $b_color, black);
        }

        &:backdrop,
        &.flat:backdrop {
          @include button(backdrop, $b_color, black);

          &:active,
          &:checked {
            @include button(backdrop-active, $b_color, black);
          }

          &:disabled {
            @include button(backdrop-insensitive, if($variant=='light', darken($headerbar_bg_color, 15%), $headerbar_bg_color), $backdrop_headerbar_fg_color);

            &:active,
            &:checked {
              @include button(backdrop-insensitive-active, $b_color, black);
            }
          }
        }

        &.flat {

          &:backdrop,
          &:disabled,
          &:backdrop:disabled {
            @include button(undecorated);

            color: transparentize($b_color, 0.2);
          }
        }

        &:disabled {
          @include button(insensitive, if($variant== "light", darken($headerbar_bg_color, 15%), $headerbar_bg_color), $headerbar_fg_color);

          &:active,
          &:checked {
            @include button(insensitive-active, $b_color, black);
          }
        }

        .osd & {
          @include button(osd, $b_color);

          &:hover {
            @include button(osd-hover, $b_color);
          }

          &:active,
          &:checked {

            &:backdrop,
            & {
              @include button(osd-active, $b_color);
            }
          }

          &:disabled {

            &:backdrop,
            & {
              @include button(osd-insensitive, $b_color);
            }
          }

          &:backdrop {
            @include button(osd-backdrop, $b_color);
          }
        }
      }
    }
  }

  entry:disabled {
    color: rgba($fg_color, 0.8);
  }

  // Also include backdrop styling, because they turn white in :backdrop
  separator {
    background: image(darken($headerbar_bg_color, 5%));

    &:backdrop {
      background: image(darken($headerbar_bg_color, 3%));
    }
  }

  @if $variant=='light' {
    switch {
      border-color: $headerbar_border_color;
      color: $headerbar_fg_color;
      background-color: $_headerbar_button_bg;
      &:hover { background-color: lighten($_headerbar_button_bg, 2%); }
      &:backdrop {
        background-color: lighten($headerbar_bg_color,1%);
        box-shadow: none;
      }
      &:disabled {
        background-color: $headerbar_bg_color;
        border-color: $_dark_border_color;
      }
      &:backdrop {
        border-color: $_btn_backdrop_border;
      }
  
      &:checked {
        color: $selected_fg_color;
        border-color: transparentize($checkradio_bg_color, 0.6);
        background-color: $checkradio_bg_color;
      }
  
      slider {
        border-color: $_headerbar_button_bg;
        
        &:checked {
          border-color: $checkradio_bg_color;
        }
        &:disabled {
          background-color: $headerbar_bg_color;
          border-color: $_dark_border_color;
          @include button(insensitive, $headerbar_bg_color);
        }
      }      
    }
  }

  // re-insert the full selection mode section from common ...
  .selection-mode &,
  &.selection-mode {
    $_hc: mix($top_hilight, $suggested_bg_color, 50%); // hilight color

    color: $selected_fg_color;
    border-color: $suggested_border_color;

    @include yaru_headerbar_fill($suggested_bg_color, $_hc);

    separator {
      background: image(lighten($suggested_bg_color, 5%));
    }

    &:backdrop {
      background-color: $suggested_bg_color;
      background-image: none;
      box-shadow: inset 0 1px mix($top_hilight, $suggested_bg_color, 60%);

      label {
        text-shadow: none;
        color: $selected_fg_color;
      }
    }

    button,
    button.image-button,
    button.image-button.toggle,
    button.text.button,
    button.toggle,
    box button.toggle,
    buttonbox.toggle,
    stackswitcher button,
    filechooser .path-bar.linked>button,
    .path-bar button {
      @include button(normal, $suggested_bg_color, $selected_fg_color);

      &.flat {
        @include button(undecorated);
      }

      &:hover {
        @include button(hover, $suggested_bg_color, $selected_fg_color);
      }

      &:active,
      &:checked,
      &.toggle:checked,
      &.toggle:active {
        @include button(active, $suggested_bg_color, $selected_fg_color);
      }

      &:backdrop {

        &.flat,
        & {
          @include button(backdrop, $suggested_bg_color, $selected_fg_color);

          -gtk-icon-effect: none;
          border-color: lighten($suggested_bg_color, 5%);

          &:active,
          &:checked {
            @include button(backdrop-active, $suggested_bg_color, $selected_fg_color);

            border-color: $suggested_border_color;
          }

          &:disabled {
            @include button(backdrop-insensitive, $suggested_bg_color, $selected_fg_color);

            border-color: $suggested_border_color;

            &:active,
            &:checked {
              @include button(backdrop-insensitive-active, $suggested_bg_color, $selected_fg_color);

              border-color: $suggested_border_color;
            }
          }
        }
      }

      &.flat {

        &:backdrop,
        &:disabled,
        &:backdrop:disabled {
          @include button(undecorated);
        }
      }

      &:disabled {
        @include button(insensitive, $suggested_bg_color, $selected_fg_color);

        &:active,
        &:checked {
          @include button(insensitive-active, $suggested_bg_color, $selected_fg_color);
        }
      }

      &.suggested-action {
        @include button(normal);

        border-color: $suggested_border_color;

        &:hover {
          @include button(hover);

          border-color: $suggested_border_color;
        }

        &:active {
          @include button(active);

          border-color: $suggested_border_color;
        }

        &:disabled {
          @include button(insensitive);

          border-color: $suggested_border_color;
        }

        &:backdrop {
          @include button(backdrop);

          border-color: $suggested_border_color;
        }

        &:backdrop:disabled {
          @include button(backdrop-insensitive);

          border-color: $suggested_border_color;
        }
      }
    }

    .selection-menu {

      &:backdrop,
      & {
        border-color: transparentize($suggested_bg_color, 1);
        background-color: transparentize($suggested_bg_color, 1);
        background-image: none;
        box-shadow: none;
        min-height: 20px;
        padding: $_sel_menu_pad;

        arrow {
          -GtkArrow-arrow-scaling: 1;
        }

        .arrow {
          -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
          color: transparentize($selected_fg_color, 0.5);
          -gtk-icon-shadow: none;
        }
      }
    }
  }
}

// separators in paned headerbars, #405
// We can't seem to use rgba here, so we darken the 
// headerbar_bg_color instead.
paned.titlebar > separator {
  color: darken($headerbar_bg_color, 5%);
  background: image(darken($headerbar_bg_color, 5%));
  background-color: darken($headerbar_bg_color, 5%);

  &:backdrop {
  color: darken($headerbar_bg_color, 3%);
  background: image(darken($headerbar_bg_color, 3%));
  background-color: darken($headerbar_bg_color, 3%);
  }
}


// titlebutton
button.titlebutton {

  &,
  &:hover,
  &:active {

    headerbar &,
    .titlebar &,
    headerbar.selection-mode & {

      // spec bump otherwise :backdrop  will still have a bg
      &,
      &:backdrop {
        @extend %undecorated_button;
      }
    }
  }

  border-radius: $small_radius;
  min-height: 24px;
  min-width: 24px;
  padding: 2px;

  &:not(.close):not(.appmenu) {
    color: $headerbar_fg_color;

    &:hover {
      @include draw_circle($headerbar_bg_color);
    }

    &:active {
      @include draw_circle($headerbar_bg_color);
    }
  }

  &.close {
    $_close_button_color: mix(#FFAD00, #E56A54, 50%);
    color: $headerbar_fg_color;
    @include draw_circle($_close_button_color);

    &:hover {
      @include draw_circle($_close_button_color);
    }

    &:active {
      @include draw_circle($_close_button_color);
    }
  }
}

headerbar button.titlebutton.appmenu.popup.toggle {

  &,
  &:backdrop {
    @include button(undecorated);
  }

  &:hover {
    @include button(hover, lighten($headerbar_bg_color, 8%), $headerbar_fg_color);
  }

  &:active, &:checked {
    $_bg: lighten($headerbar_bg_color, if($variant==light, 0%, 1%));
    @include button(active, $_bg, $headerbar_fg_color);
    border-color: $_dark_border_color;
    background-image: image(darken($_bg, 9%));
  }
}

// with a flatter headerbar and buttons, we dont need that heavy shadows in the headerbar
headerbar * {
  text-shadow: none;
  -gtk-icon-shadow: none;
}
// same for the rest of the theme, but not axe the icon shadows, otherwise things don't work
* {
  text-shadow: none;
}

// make checks and radios more flat, remove this when upstream flattens their cheks/radios
check,
radio {

  &,
  &:hover,
  &:active,
  &:checked,
  &:disabled {

    &:not(.selected) {
      box-shadow: none;
      background-image: none;
      -gtk-icon-shadow: none;
    }
  }

  &,
  &:hover,
  &:active {
    border-color: rgba($fg_color, 0.6);
  }

  &:disabled {
    border-color: rgba($fg_color, 0.2);
  }

  :selected & {
    border-color: $selected_fg_color;
  }

  &:not(:backdrop):checked:not(.selected) {
    border-color: $checkradio_bg_color;
    background-image: image($checkradio_bg_color);
    color: $checkradio_fg_color;
  }

  &:not(:backdrop):disabled:checked {
    background-image: image(rgba($checkradio_bg_color, 0.4));
    border-color: rgba($checkradio_bg_color, 0.4);
  }
}

/******************************************
 * treeview.view Progressbar improvements *
 ******************************************/
treeview.view.trough,
treeview.view.progressbar {
  background: none;
  border-bottom: 3px solid transparent;
  background-color: transparent;
}

treeview.view.progressbar {
  background: none;
  background-color: transparent;
  border-bottom-color: $selected_bg_color;
}

treeview.view.progressbar:selected {
  background: none;
  background-color: transparent;
  border-bottom-color: $selected_fg_color;
}

treeview.view.trough {
  background: none;
  background-color: transparent;
  border-bottom-color: rgba($fg_color, 0.2);
}

treeview.view.trough:selected {
  background: none;
  background-color: transparent;
  border-bottom-color: rgba($selected_fg_color, 0.2);
}

treeview.view {
  color: $fg_color;
  background-color: $base_color;
}

treeview.view:selected {
  background: none;
  color: $selected_fg_color;
  background-color: $selected_bg_color;
}

// TODO: REMOVE the diff when we fixed this upstream (upstream has blue suggested border color)
switch {
  row:selected:not(:disabled) & {
    @if $variant == 'light' {
      box-shadow: none;
      border-color: $selected_borders_color;

      &:backdrop { border-color: $selected_borders_color; }

      slider { &:checked { border-color: $suggested_border_color; } }
    }
  }
}

/**********
 * Switch *
 **********/
 switch {
  outline-offset: -4px;

  // similar to the .scale
  border: 0px solid transparent;
  border-radius: 999px;
  color: $fg_color;
  background-color: rgba($fg_color, 0.4);
  box-shadow: 0 1px 2px 0 rgba(black, 0.5) inset;
  text-shadow: 0 1px transparentize(black, 0.9);

  &:checked {
    color: $selected_fg_color;
    border-color: transparent;
    background-color: $checkradio_bg_color;
    text-shadow: 0 1px transparentize($checkradio_bg_color, 0.5),
                 0 0 2px transparentize(white, 0.4);
  }

  &:disabled {
    color: $insensitive_fg_color;
    border-color: transparent;
    background-color: rgba($fg_color, 0.2);
    box-shadow: none;
    text-shadow: none;

    &:checked {
      background-color: rgba($checkradio_bg_color, 0.5);
    }
  }

  &:backdrop {
    color: $backdrop_fg_color;
    border-color: transparent;
    background-color: rgba($fg_color, 0.2);
    text-shadow: none;
    transition: $backdrop_transition;
    box-shadow: 0 1px 2px 0 rgba(black, 0.3) inset;

    &:checked {
      @if $variant == 'light' { color: $backdrop_bg_color; }
      border-color: transparent;
      background-color: rgba($checkradio_bg_color, 0.7);
    }

    &:disabled {
      color: $backdrop_insensitive_color;
      border-color: $backdrop_borders_color;
      background-color: rgba($fg_color, 0.1);
      box-shadow: none;

      &:checked {
        background-color: rgba($checkradio_bg_color, 0.5);
      }
    }
  }

  slider {
    margin: 3px;
    min-width: 20px;
    min-height: 20px;
    border: 0px solid transparent;
    border-radius: 999px;
    transition: $button_transition;
    box-shadow: 0 1px 2px 0 rgba(black, 0.5);
    -gtk-outline-radius: 9999px;

    @if $variant == 'light' {
      @include button(normal-alt, $edge: none);
      border-width: 0px;
      border-color: $bg_color;
      box-shadow: none;
    } 
    @else {
      @include button(normal-alt, $c: lighten($bg_color, 6%), $edge: none);
      border-width: 0px;
      border-color: lighten($bg_color, 6%);
      box-shadow: none;
    }
  }
  
  image { color: transparent; } /* only show i / o for the accessible theme */

  &:hover slider {
    @if $variant == 'light' {
      @include button(hover-alt, $edge: none);
      border-width: 0px;
      border-color: $bg_color;
      box-shadow: none;
    }
    @else {
      @include button(hover-alt, $c: lighten($bg_color,6%), $edge: none);
      border-width: 0px;
      border-color: $bg_color;
      box-shadow: none;
    }
  }

  &:checked slider { border: 0px solid $bg_color; }

  &:disabled slider { @include button(insensitive); }

  &:backdrop {
    slider {
      transition: $backdrop_transition;

      @include button(backdrop);
    }

    &:checked slider { border-color: transparent; }

    &:disabled slider { @include button(backdrop-insensitive);
      border-color: $bg_color;
    border-width: 0px; }
  }

  row:selected & {
    @if $variant == 'light' {
      box-shadow: none;
      border-color: $selected_borders_color;

      &:backdrop { border-color: $selected_borders_color; }

      slider { &:checked, & { border-color: $selected_borders_color; } }
    }
  }

}

/*************
 * Notebooks *
 *************/

notebook > header {
  &.top {
    tabs tab:checked {
      box-shadow: inset 0 -3px $checkradio_bg_color;
    }
  }

  &.bottom {
    tabs tab:checked {
      box-shadow: inset 0 3px $checkradio_bg_color;
    }
  }

  &.left {
    tabs tab:checked {
      box-shadow: inset -3px 0 $checkradio_bg_color;
    }
  }

  &.right {
    tabs tab:checked {
      box-shadow: inset 3px 0 $checkradio_bg_color;
    }
  }
}

scale {
  slider {
    @include button(normal-alt, $edge: none);

    border: 1px solid $selected_bg_color;
    background-image: none;
    background-color: $selected_bg_color;
    border-radius: 100%;
    box-shadow: 0 1px 0 rgba(black, 0.1);
    transition: $button_transition;
    transition-property: background, border, box-shadow;

    &:backdrop {
      border: 1px solid $selected_bg_color;
      background-image: none;
      background-color: mix($selected_bg_color, $bg_color, 60%);
      border-radius: 100%;
      box-shadow: 0 1px 0 rgba(black, 0.1);
      transition: $button_transition;
      transition-property: background, border, box-shadow;
    }

    &:hover { 
      @include button(hover-alt, $edge: none);
      background-image: none;
      background-color: $selected_bg_color;
      border-color: $selected_bg_color;
      box-shadow: 0 1px 0 rgba(black, 0.1);
    }

    &:active { 
      border-color: lighten($selected_bg_color, 20%);
    }

    &:disabled { 
      @include button(insensitive);
      background-image: none;
      background-color: mix($selected_bg_color, $bg_color, 50%);
      border-color: mix($selected_bg_color, $bg_color, 60%);
      box-shadow: none;

      &:backdrop {
        @include button(insensitive);
        background-image: none;
        background-color: mix($selected_bg_color, $bg_color, 30%);
        border-color: mix($selected_bg_color, $bg_color, 50%);
        box-shadow: none;
      }
    }

    // ...on selected list rows
    row:selected & {  
      background-color: $selected_fg_color;
      border-color: $selected_fg_color;

      &:disabled {
        background-color: rgba($selected_fg_color, 0.6);
        border-color: rgba($selected_fg_color, 0.6);
      }
    }
  }
}
