// libhandy styles, mostly borrowed from Zuki, which in turn borrowed from Yaru
$menu_radius: 5px;

@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: 7px;
      }
    }
  }
  
  // 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: hdyalpha($bg_color, 0.5);
      border-color: hdyalpha($borders_color, 0.7);
      border-style: solid;
      border-width: 1px 0px 0px 0px;
    }
  
    // 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;
    }
  }
  
  // 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);
      }
  
      &: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: shade($borders_color, 1.15);
      }
  
      &:not(only-child):last-child:not(:checked):hover {
        border-right-color: shade($borders_color, 1.15);
      }
  
      &:not(:checked):hover:backdrop {
        @include button(hover);
      }
  
      // View switcher in a header bar
      headerbar &:not(:checked) {
        &:hover:not(:backdrop) {
          @include button(hover);
        }
  
        &:not(only-child):first-child:hover,
        &:hover + button:not(:checked):not(:hover),
        &:not(:hover) + button:not(:checked):hover {
          border-left-color: $borders_color;
        }
  
        &:not(only-child):last-child:hover {
          border-right-color: $borders_color;
        }
  
        &:hover:backdrop {
          @include button(hover);
        }
      }
      &:checked, &:active {
        @include button(active);
      }
  
      // 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;
  }
  
  // Lists
  list.content {
    background-color: $base_color;
    color: $fg_color;
    border: 1px solid $borders_color;
    border-radius: $menu_radius;
  
    > row {
      margin: 0;
      padding: 2px;
      transition: 200ms $ease-out-quad;
      // Add space around expanded rows
      &.expander:checked:not(:first-child),
      &.expander:checked + row {
        margin-top: 6px;
      }
      &:not(:last-child) {
        border-bottom: 1px solid if($variant == 'light', lighten($borders_color, 7%), transparentize($borders_color, 0.5));
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
      &:not(:first-child):not(:last-child) {
        border-radius: 0;
        -gtk-outline-radius: 0;
      }
      &:first-child {
        border-top-left-radius: $menu_radius;
        border-top-right-radius: $menu_radius;
        -gtk-outline-radius: $menu_radius $menu_radius 0 0;
      }
      &:last-child {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: $menu_radius;
        border-bottom-right-radius: $menu_radius;
        -gtk-outline-radius: 0 0 $menu_radius $menu_radius;
      }
      &:only-child {
        border-bottom: none;
        border-radius: $menu_radius;
        -gtk-outline-radius: $menu_radius;
      }
      &:not(:selected):hover {
        background-color: if($variant == 'light', darken($base_color, 4%), lighten($base_color, 4%));
      }
    }
  }
  
  // Preferences
  .preferences scrolledwindow {
    background-color: $sidebar_bg_color;
  }
  
  // List button
  button.list-button:not(:active):not(:checked):not(:hover) {
    background: none;
    border: 1px solid hdyalpha($borders_color, 0.5);
    box-shadow: none;
  }
  
  // HdyStatusPage
  statuspage > scrolledwindow > viewport > box > clamp > box > .icon {
    color: transparentize($fg_color, 0.5);
  
    &:backdrop {
      color: transparentize($backdrop_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},
                                transparentize($selected_bg_color, .3),
                                transparentize($selected_bg_color, .5) 1px,
                                transparentize($selected_bg_color, 1) 20px);
  }
  
  tabbar {
    .box {
      min-height: 38px;
      background: $dark_fill;
      border-bottom: 1px solid $borders_color;
  
      &:backdrop {
        background-color: $backdrop_dark_fill;
        border-color: $backdrop_borders_color;
      }
    }
  
    scrolledwindow.pinned {
      undershoot {
        border: 0 solid $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 $borders_color;
  
          &:backdrop {
            box-shadow: inset -1px 0 $backdrop_borders_color;
          }
        }
  
        &:dir(rtl) {
          padding-left: 1px;
          box-shadow: inset 1px 0 $borders_color;
  
          &:backdrop {
            box-shadow: inset 1px 0 $backdrop_borders_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 {
      border-style: solid;
      border-color: $borders_color;
      border-width: 0 1px 0 1px;
      transition: background 150ms ease-in-out;
      background-color: $dark_fill;
  
      &:checked {
        background-color: $base_color;
  
        &:hover {
          background-color: $base_color;
        }
      }
  
      &:hover {
        background-color: darken($dark_fill, 3%);
      }
  
      &:backdrop {
        border-color: $backdrop_borders_color;
        background-color: $backdrop_dark_fill;
  
        &:checked {
          background-color: $backdrop_bg_color;
        }
      }
    }
  
    .start-action,
    .end-action {
      background: $dark_fill;
      border-color: $borders_color;
      border-style: solid;
      transition: background 150ms ease-in-out;
  
      &:backdrop {
        border-color: $backdrop_borders_color;
        background-color: $backdrop_dark_fill;
      }
  
      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: $base_color;
  
      $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1));
  
      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),
                          transparentize($selected_bg_color, .8) 15%,
                          transparentize($selected_bg_color, 1) 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;
    }
  }