// libhandy styles, mostly borrowed from Yaru https://github.com/ubuntu/yaru

@function hdyalpha($c, $a) {
  @return unquote("alpha(#{$c}, #{$a})");
}

@function hdymix($c1, $c2, $r) {
  @return unquote("mix(#{$c1}, #{$c2}, #{$r})");
}

$leaflet_dimming: rgba(0, 0, 0, if($variant == 'light', 0.12, 0.24));
$leaflet_border: rgba(0, 0, 0, if($variant == 'light', 0.05, 0.2));
$leaflet_outline: rgba(255, 255, 255, if($variant == 'light', 0.2, 0.05));

@mixin background-shadow($direction) {
  background-image:
    linear-gradient($direction,
                    rgba(0, 0, 0, if($variant == 'light', 0.05, 0.1)),
                    rgba(0, 0, 0, if($variant == 'light', 0.01, 0.02)) 40px,
                    rgba(0, 0, 0, 0) 56px),
    linear-gradient($direction,
                    rgba(0, 0, 0, if($variant == 'light', 0.03, 0.06)),
                    rgba(0, 0, 0, if($variant == 'light', 0.01, 0.02)) 7px,
                    rgba(0, 0, 0, 0) 24px);
}

// Makes the corners of the given border rounded.
// $border must be top, bottom, left, or right.
@mixin rounded-border($border) {
  // The floors (top, bottom) and walls (left, right) of the corners matching
  // $border. This is needed to easily form floor-wall pairs regardless of
  // whether $border is a floor or a wall.
  $corners: (
    'top': (('top'), ('left', 'right')),
    'bottom': (('bottom'), ('left', 'right')),
    'left': (('top', 'bottom'), ('left')),
    'right': (('top', 'bottom'), ('right')),
  );

  @if not map-get($corners, $border) {
    @error "Unknown border type: #{$border}";
  }

  // Loop through the floors and walls of the corners of $border.
  @each $floor in nth(map-get($corners, $border), 1) {
    @each $wall in nth(map-get($corners, $border), 2) {
      border-#{$floor}-#{$wall}-radius: 8px;
      -gtk-outline-#{$floor}-#{$wall}-radius: 7px;
    }
  }
}

@mixin margin-start($margin) {
  &:dir(ltr) {
    margin-left: $margin;
  }

  &:dir(rtl) {
    margin-right: $margin;
  }
}

// Roundness on unified window decoration
// https://gitlab.gnome.org/GNOME/libhandy/-/issues/339
window.csd.unified:not(.solid-csd):not(.fullscreen) {
  &:not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized) {
    &,
    > decoration,
    > decoration-overlay {
      border-radius: $window_radius;
    }
  }
}

// Better scrollbars when the bottom corner is rounded
window.csd.unified {
  $_slider_width: 8px;
  $_slider_min_length: 40px;
  $_scrollbar_transition: all 200ms linear;
  scrollbar {
    background-color: $base_color;
    color: $fg_color;

    trough {
      margin: 7px;
      transition: $_scrollbar_transition;
      border-radius: 10px;
      background-color: $trough_color;

      > slider {
        min-width: $_slider_width;
        min-height: $_slider_width;
        margin: -6px;
        border: 6px solid transparent;
        border-radius: 10px;
        background-clip: padding-box;
        transition: $_scrollbar_transition;
      }
    }

    &.horizontal trough {
      margin-top: 6px;
      margin-bottom: 6px;
    }

    &.vertical trough {
      margin-left: 6px;
      margin-right: 6px;
    }

    &.overlay-indicator {
      background: none;
      color: inherit;
      box-shadow: none;
      padding: 0;

      &:not(.hovering) trough { background-color: transparent; }

      &.horizontal {
        trough > slider {
          min-width: $_slider_min_length;
        }

        &.hovering trough > slider {
          min-height: $_slider_width;
        }

        &:not(.hovering) trough {
          margin-top: 3px;
          margin-bottom: 3px;
        }
      }

      &.vertical {
        trough > slider {
          min-height: $_slider_min_length;
        }

        &.hovering trough > slider {
          min-width: $_slider_width;
        }

        &:not(.hovering) trough {
          margin-left: 3px;
          margin-right: 3px;
        }
      }
    }

    &.horizontal trough > slider { min-width: $_slider_min_length; }
    &.vertical trough > slider { min-height: $_slider_min_length; }
  }
}

// HdyComboRow
popover.combo {
  padding: 0px;

  list {
    border-style: none;
    background-color: transparent;
    min-width: 200px;
    margin-top: 6px;
    margin-bottom: 6px;

    > row {
      padding: 0px 8px 0px 8px;
      min-height: 50px;

      &:not(:last-child) {
        border-bottom: 1px solid hdyalpha($borders_color, 0.5)
      }

      &:first-child {
        @include rounded-border(top);
      }

      &:last-child {
        @include rounded-border(bottom);
      }
    }
  }

  @each $border in top, bottom {
    overshoot.#{$border} {
      @include rounded-border($border);
    }
  }

  scrollbar.vertical {
    padding-top: 2px;
    padding-bottom: 2px;

    &:dir(ltr) {
      @include rounded-border(right);
    }

    &:dir(rtl) {
      @include rounded-border(left);
    }
  }
}

// HdyExpanderRow
row.expander {
  padding: 0px;

  image.expander-row-arrow {
    @include margin-start(6px);
  }
}

row.expander {
  // Drop transparent background on expander rows to let nested rows handle it,
  // avoiding double highlights.
  background-color: transparent;

  list.nested > row {
    background-color: transparent;
    border-radius: 0;
    border: none;

    &:not(:selected).activatable {
      &:hover {
        background-color: gtkalpha(currentColor, .03);
      }

      &:active {
        background-color: gtkalpha(currentColor, .08);
      }
    }
  }

  list.nested {
    background-color: gtkalpha($card_shade_color, .5);
    color: inherit;
    border-radius: 0;
    border-top: 1px solid $border_color;
  }

  // HdyExpanderRow arrow rotation

  image.expander-row-arrow {
    transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  &:checked image.expander-row-arrow {
    -gtk-icon-transform: rotate(0turn);
  }

  &:not(:checked) image.expander-row-arrow {
    opacity: 0.55;
    text-shadow: none;

    &:dir(ltr) {
      -gtk-icon-transform: rotate(-0.25turn);
    }

    &:dir(rtl) {
      -gtk-icon-transform: rotate(0.25turn);
    }
  }

  &:checked image.expander-row-arrow:not(:disabled) {
    color: $selected_bg_color;
  }

  & image.expander-row-arrow:disabled {
    color: $insensitive_fg_color;
  }
}

// Lists
list.content {
  list {
    background-color: transparent;
    border-radius: $card_radius;
  }

  background-color: transparent; //$card_bg_color;
  color: $card_fg_color;
  border-radius: $card_radius;

  > row {
    background-color: $card_bg_color;
    color: $card_fg_color;
    margin: 0;
    //padding: 2px;
    transition: 200ms $ease-out-quad;

    &:not(:last-child) {
      //border-bottom: 1px solid $border_color;
      box-shadow: inset 0 -1px $card_shade_color;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:not(:first-child):not(:last-child) {
      border-radius: 0;
      border-left: 1px solid $card_shade_color;
      border-right: 1px solid $card_shade_color;
      -gtk-outline-radius: 0;
    }

    &:first-child {
      border-top-left-radius: $card_radius;
      border-top-right-radius: $card_radius;
      border-top: 1px solid $card_shade_color;
      border-left: 1px solid $card_shade_color;
      border-right: 1px solid $card_shade_color;
      -gtk-outline-radius: $card_radius $card_radius 0 0;
    }

    &:last-child {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border-bottom-left-radius: $card_radius;
      border-bottom-right-radius: $card_radius;
      border-bottom: 1px solid $card_shade_color;
      border-left: 1px solid $card_shade_color;
      border-right: 1px solid $card_shade_color;
      -gtk-outline-radius: 0 0 $card_radius $card_radius;
    }

    &:only-child {
      border: 1px solid $card_shade_color;
      border-radius: $card_radius;
      -gtk-outline-radius: $card_radius;
    }

    &:not(.expander):not(:active):hover.activatable:not(:selected),
    &.expander row.header:not(:active):hover.activatable:not(:selected) {
      background-color: hdymix($card_fg_color, $card_bg_color, 0.954);
    }
  }
}

// List button
button.list-button:not(:active):not(:checked):not(:hover) {
  @include button(normal, $card_bg_color, $card_fg_color);
}

// HdyKeypad
keypad {
  .digit {
    font-size: 200%;
    font-weight: bold;
  }
  .letters {
    font-size: 70%;
  }
  .symbol {
    font-size: 160%;
  }
}

// HdyViewSwitcher
viewswitcher {
  &, & button {
    margin: 0;
    padding: 0;
  }

  button {
    border-radius: 0;
    border-top: 0;
    border-bottom: 0;
    box-shadow: none;
    font-size: 1rem;
    border-width: 0;

    &:not(:checked):not(:hover) {
      background: transparent;
    }

    &:not(:only-child):not(:last-child) {
      border-right-width: 0px;
    }

    &:not(only-child):first-child:not(:checked):not(:hover),
    &:not(:checked):not(:hover) + button:not(:checked):not(:hover) {
      border-left-color: transparent;
    }

    &:not(only-child):last-child:not(:checked):not(:hover) {
      border-right-color: transparent;
    }

    &:not(:checked):hover:not(:backdrop) {
      @include button(hover);
      background-image: none;
    }

    &:not(only-child):first-child:not(:checked):hover,
    &:not(:checked):hover + button:not(:checked):not(:hover),
    &:not(:checked):not(:hover) + button:not(:checked):hover {
      border-left-color: $border_color;
    }

    &:not(only-child):last-child:not(:checked):hover {
      border-right-color: $border_color;
    }

    &:not(:checked):hover:backdrop {
      @include button(backdrop);
      background-image: none;
    }

    // View switcher in a header bar
    headerbar &:not(:checked) {
      &:hover:not(:backdrop) {
        background-image: none;
        @if $variant == 'light' {
          @include button(normal, gtkmix(white, $headerbar_bg_color, 28%), $headerbar_fg_color);
        }
        @else {
          @include button(normal, gtkmix(black, $headerbar_bg_color, 13%), $headerbar_fg_color);
        }
      }

      &:not(only-child):first-child:hover,
      &:hover + button:not(:checked):not(:hover),
      &:not(:hover) + button:not(:checked):hover {
        border-left-color: $border_color;
      }

      &:not(only-child):last-child:hover {
        border-right-color: $border_color;
      }

      &:hover:backdrop {
        @if $variant == 'light' {
          @include button(backdrop, gtkmix(white, $headerbar_backdrop_color, 70%), $backdrop_fg_color);
        }
        @else {
          @include button(backdrop, gtkmix(black, $headerbar_backdrop_color, 10%), $backdrop_fg_color);
        }
        background-image: none;
      }
    }
    &:checked, &:active {
      @include button(active);
      background-image: none;
      &:backdrop {
        @include button(backdrop-active);
        background-image: none;
      }
    }

    // View switcher button
    > stack > box {
      &.narrow {
        font-size: 0.75rem;
        padding-top: 7px;
        padding-bottom: 5px;

        image,
        label {
          padding-left: 8px;
          padding-right: 8px;
        }
      }

      &.wide {
        padding: 8px 12px;

        image {
          &:dir(ltr) {
            padding-left: 7px;
          }

          &:dir(rtl) {
            padding-right: 7px;
          }
        }

        label {
          &:dir(ltr) {
            padding-right: 7px;
          }

          &:dir(rtl) {
            padding-left: 7px;
          }
        }
      }

      label.active {
        font-weight: bold;
      }
    }

    &.needs-attention {
      &:active > stack > box label,
      &:checked > stack > box label {
        animation: none;
        background-image: none;
      }

      > stack > box label {
        animation: needs_attention 150ms ease-in;
        background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to($selected_bg_color), to(transparent));
        background-size: 6px 6px, 6px 6px;
        background-repeat: no-repeat;
        background-position: right 0px, right 1px;

        &:backdrop {
          background-size: 6px 6px, 0 0;
        }

        &:dir(rtl) {
          background-position: left 0px, left 1px;
        }
      }
    }
  }
}

// HdyViewSwitcherBar
viewswitcherbar actionbar > revealer > box {
  padding: 0;
}

// HdyViewSwitcherTitle
viewswitchertitle viewswitcher {
  margin-left: 12px;
  margin-right: 12px;
}

// HdyStatusPage
statuspage > scrolledwindow > viewport > box > clamp > box > .icon {
  color: gtkalpha($fg_color, 0.5);
}

statuspage > scrolledwindow > viewport > box {
  margin: 36px 12px;

  > clamp {
    &:not(:last-child) > box {
      margin-bottom: 36px;
    }

    > box {
      > .icon:not(:last-child) {
        margin-bottom: 36px;
      }

      > .title:not(:last-child) {
        margin-bottom: 12px;
      }
    }
  }
}

// HdyActionRow
row {
  label.subtitle {
    font-size: smaller;
    opacity: 0.55;
    text-shadow: none;
  }

  > box.header {
    margin-left: 12px;
    margin-right: 12px;
    min-height: 50px;

    > box.title {
      margin-top: 8px;
      margin-bottom: 8px;
    }
  }
}

// Hdy tabs
@mixin undershoot-gradient($dir) {
  @if $variant == 'dark' {
    background: linear-gradient(to #{$dir},
                                transparentize(black, .6),
                                transparentize(black, 1) 20px);
  }
  @else {
    background: linear-gradient(to #{$dir},
                                transparentize(black, .93),
                                transparentize(black, 1) 20px);
  }
}

@mixin need-attention-gradient($dir) {
  background: linear-gradient(to #{$dir},
                              gtkalpha($selected_bg_color, .7),
                              gtkalpha($selected_bg_color, .5) 1px,
                              gtkalpha($selected_bg_color, 0) 20px);
}

tabbar {
  .box {
    min-height: 38px;
    background: $headerbar_bg_color;
    border-bottom: 1px solid $headerbar_shade_color;

    &:backdrop {
      color: gtkmix($headerbar_fg_color, $headerbar_backdrop_color, 50%);
      background-color: $headerbar_backdrop_color;
    }
  }

  scrolledwindow.pinned {
    undershoot {
      border: 0 solid $alt_borders_color;
    }

    &:dir(rtl) undershoot.left {
      border-left-width: 1px;
    }

    &:dir(ltr) undershoot.right {
      border-right-width: 1px;
    }

    &:backdrop undershoot {
      border-color: $backdrop_borders_color;
    }

    tabbox {
      &:dir(ltr) {
        padding-right: 1px;
        box-shadow: inset -1px 0 $border_color;
      }

      &:dir(rtl) {
        padding-left: 1px;
        box-shadow: inset 1px 0 $border_color;
      }
    }
  }

  undershoot {
    transition: none;

    &.left {
      @include undershoot-gradient("right");
    }

    &.right {
      @include undershoot-gradient("left");
    }
  }

  .needs-attention-left undershoot.left {
    @include need-attention-gradient("right");
  }

  .needs-attention-right undershoot.right {
    @include need-attention-gradient("left");
  }

  tab {
    margin: 4px 3px;
    border-style: none;
    border-radius: $button_radius;
    transition: background-color 150ms ease-in-out;

    background-image: if($variant == 'light',
                          -gtk-scaled(
                            url('assets/tab-border-light.png'),
                            url('assets/tab-border-light@2.png')
                          ),
                          -gtk-scaled(
                            url('assets/tab-border-dark.png'),
                            url('assets/tab-border-dark@2.png')
                          )
                        );

    background-position: left;
    background-repeat: no-repeat;

    &:first-child { background-image: none; }

    &:hover {
      background-color: $hover_color;
      &, + tab { background-image: none; }
    }

    &:checked {
      background-color: $selected_color;
      &, + tab { background-image: none; }

      &:hover { background-color: $selected_hover_color; }
    }
  }

  .start-action,
  .end-action {
    background-color: $headerbar_bg_color;
    border-color: transparent;
    border-style: solid;
    transition: background-color 150ms ease-in-out;

    &:backdrop {
      border-color: transparent;
      background-color: $headerbar_backdrop_color;
    }

    button {
      border: none;
      border-radius: 0;
    }
  }

  .start-action:dir(ltr),
  .end-action:dir(rtl) {
    border-right-width: 1px;

    > * {
      margin-right: 1px;
    }
  }

  .start-action:dir(rtl),
  .end-action:dir(ltr) {
    border-left-width: 1px;

    > * {
      margin-left: 1px;
    }
  }
}

.tab-drag-icon {
  tab {
    min-height: 26px;
    background-color: $tab_color_active;

    $_wm_border: if($variant=='light', transparentize(black, 0.77), gtkalpha($borders_color, 0.9));

    box-shadow: 0 3px 9px 1px transparentize(black, 0.75),
                0 0 0 1px $_wm_border, //doing borders with box-shadow
                inset 0 1px $top_hilight;

    margin: 25px;
  }
}

tabbar,
.tab-drag-icon {
  tab {
    padding: 6px;

    &.needs-attention {
      background-image:
        radial-gradient(ellipse at bottom,
                        transparentize(white, .2),
                        gtkalpha($selected_bg_color, .2) 15%,
                        gtkalpha($selected_bg_color, 0) 15%);
    }

    .tab-close-button,
    .tab-indicator {
      padding: 0;
      margin: 0;
      min-width: 24px;
      min-height: 24px;
      border-radius: 99px;

      border: none;
      box-shadow: none;
      -gtk-icon-shadow: none;
      text-shadow: none;
      background: none;
    }

    .tab-close-button,
    .tab-indicator.clickable {
      &:hover {
        background: hdyalpha($fg_color, .15);
      }

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

// Shadows
flap,
deck,
leaflet {
  > dimming {
    background: $leaflet_dimming;
  }

  > border {
    min-width: 1px;
    min-height: 1px;
    background: $leaflet_border;
  }

  > shadow {
    min-width: 56px;
    min-height: 56px;

    &.left  { @include background-shadow(to right); }
    &.right { @include background-shadow(to left); }
    &.up    { @include background-shadow(to bottom); }
    &.down  { @include background-shadow(to top); }
  }

  > outline {
    min-width: 1px;
    min-height: 1px;
    background: $leaflet_outline;
  }
}

// Avatar
avatar {
  border-radius: 9999px;
  -gtk-outline-radius: 9999px;
  font-weight: bold;

  // The list of colors to generate avatars.
  // Each avatar color is represented by a font color, a gradient start color and a gradient stop color.
  // There are 8 different colors for avtars in the list if you change the number of them you
  // need to update the NUMBER_OF_COLORS in src/hdy-avatar.c.
  // The 2D list has this form: ((font-color, gradient-top-color, gradient-bottom-color)).
  $avatarcolorlist: (
   (#cfe1f5, #83b6ec, #337fdc), // blue
   (#caeaf2, #7ad9f1, #0f9ac8), // cyan
   (#cef8d8, #8de6b1, #29ae74), // green
   (#e6f9d7, #b5e98a, #6ab85b), // lime
   (#f9f4e1, #f8e359, #d29d09), // yellow
   (#ffead1, #ffcb62, #d68400), // gold
   (#ffe5c5, #ffa95a, #ed5b00), // orange
   (#f8d2ce, #f78773, #e62d42), // raspberry
   (#fac7de, #e973ab, #e33b6a), // magenta
   (#e7c2e8, #cb78d4, #9945b5), // purple
   (#d5d2f5, #9e91e8, #7a59ca), // violet
   (#f2eade, #e3cf9c, #b08952), // beige
   (#e5d6ca, #be916d, #785336), // brown
   (#d8d7d3, #c0bfbc, #6e6d71), // gray
  );

  @for $i from 1 through length($avatarcolorlist) {
    &.color#{$i} {
      $avatarcolor: nth($avatarcolorlist, $i);
      background-image: linear-gradient(nth($avatarcolor, 2), nth($avatarcolor, 3));
      color: nth($avatarcolor, 1);
    }
  }

  &.contrasted { color: #fff; }

  &.image { background: none; }
}

// Preferences
window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp,
preferencespage > scrolledwindow > viewport > clamp {
  margin: 0 12px;

  > list,
  > box > preferencesgroup { margin-top: 24px; }
}

preferencesgroup > box {
  // Add space between the description and the title.
  > label:not(:first-child) {
    margin-top: 6px;
  }

  // Add space between the box and the labels.
  > box:not(:first-child) {
    margin-top: 12px;
  }
}

tabbar .tab-indicator:not(.clickable) {
  background: none;
  box-shadow: none;
  border-color: transparent;
}

// window handle
.windowhandle {
  &, & * {
    // This is the most reliable way to enable window dragging
    -GtkWidget-window-dragging: true;
  }
}

// Heading text usually found above some hdy lists (gnome web)
.heading.h4 {
  color: $window_fg_color;
}
