//
// avatar
//

avatar {
  border-radius: $circular_radius;
  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/adw-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: white; }

  &.image { background: none; }
}

//
// GtkVideo
//

video {
  & image.osd {
    min-width: 64px;
    min-height: 64px;
    border-radius: 32px;
  }

  background: black;
}

//
// AdwAboutWindow
//

window.about,
dialog.about {
  .main-page {
    > viewport > clamp > box {
      margin: 12px;
      border-spacing: 6px;

      > box {
        margin-top: 18px;
        border-spacing: 18px;
        margin-bottom: 6px;
      }
    }

    .app-version {
      padding: 3px 18px;
      color: $primary_color;
      border-radius: 999px;
      margin-top: 3px;
    }
  }

  .subpage {
    > viewport > clamp > box {
      margin: 18px 12px;
      border-spacing: 18px;
    }

    > clamp > textview {
      background: none;
      color: inherit;
    }
  }
}

//
// preferencespage
//

preferencespage > scrolledwindow > viewport > clamp > box {
  margin: 24px 12px;
  border-spacing: 24px;
}

preferencesgroup > box {
  &, .labels {
    border-spacing: $container_padding;
  }

  > box.header:not(.single-line) {
    margin-bottom: $container_padding;
  }

  > box.single-line {
    min-height: 34px;
  }

  grid > box > switch {
    margin: 14px 0;
  }
}

//
// AdwStatusPage
//

statuspage {
  > scrolledwindow > viewport > box {
    margin: 36px $container_padding * 2;
    border-spacing: 36px;

    > clamp > box {
      border-spacing: $container_padding * 2;

      > .icon {
        -gtk-icon-size: 128px;

        color: gtkalpha(currentColor, 0.55);

        &:disabled {
          opacity: $disabled_opacity;
        }

        &:not(:last-child) {
          margin-bottom: 24px;
        }
      }
    }
  }

  &.compact > scrolledwindow > viewport > box {
    margin: 24px 12px;
    border-spacing: 24px;

    > clamp > box {
      > .icon {
        -gtk-icon-size: 96px;

        &:not(:last-child) {
          margin-bottom: $container_padding * 2;
        }
      }

      > .title {
        font-size: 18pt;
      }
    }
  }
}


//
// Cards
//

.card {
  @at-root %card, & {
    @extend %circular_list;

    .osd &, &.osd {
      background-color: gtkalpha(currentColor, .1);
      color: inherit;
      box-shadow: none;
    }
  }

  .osd &, &.osd {
    &:focus:focus-visible {
      outline-color: $fill_color;
    }
  }

  &.activatable {
    transition: $button_transition;

    &:hover {
      background-image: image(gtkalpha(currentColor, .03));
    }

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

//
// Toasts
//

toast {
  @extend %osd;
  margin: $container_padding * 2;
  margin-bottom: $container_padding * 3;
  border-radius: $circular_radius;
  border-spacing: $container_padding;
  padding: $container_padding;
  box-shadow: 0 3px 8px rgba(black, 0.35), $wm_outline;
  outline: 1px solid $highlight_color;
  outline-offset: -1px;

  &:dir(ltr) { padding-left: $container_padding * 2; }
  &:dir(rtl) { padding-right: $container_padding * 2; }

  button { @extend %osd_button; }

  > widget {
    margin: 0 $container_padding;
  }
}

//
// viewswitcher
//

viewswitcher {
  margin: 0;
  min-height: $small_size + 8px;
  border-spacing: $container_padding / 2;

  &.narrow {
    margin-top: 0;
    margin-bottom: 0;
    min-height: $container_padding;
  }

  button.toggle {
    font-weight: normal;
    padding: 0;

    > stack > box {
      &.narrow {
        font-size: 0.75rem;
        padding-top: $container_padding + 2px;

        > label {
          min-height: 18px;
          padding-left: 3px;
          padding-right: 3px;
          padding-bottom: 0;
        }
      }

      &.wide {
        padding: 0 $container_padding * 2;
        border-spacing: $container_padding;
      }
    }
  }
}

viewswitcherbar actionbar > revealer > box {
  padding-left: $container_padding;
  padding-right: $container_padding;
  padding-top: $container_padding;
}

// AdwViewSwitcherTitle
viewswitchertitle {
  margin-top: 0;
  margin-bottom: 0;

  viewswitcher {
    margin-left: $container_padding * 2;
    margin-right: $container_padding * 2;

    &.narrow {
      margin-top: 0;
      margin-bottom: 0;

      button.toggle {
        > stack > box {
          &.narrow {
            padding-top: 0;
            padding-bottom: 0;
            border-spacing: 0;
          }
        }
      }
    }

    &.wide {
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  windowtitle {
    margin-top: 0;
    margin-bottom: 0;
  }
}

// AdwIndicatorBin
indicatorbin {
  > indicator, > mask {
    min-width: $container_padding * 2;
    min-height: $container_padding * 2;
    border-radius: $circular_radius;
  }

  > indicator {
    margin: 1px;
    background: gtkalpha(currentColor, .4);

    > label {
      font-size: 0.6rem;
      font-weight: normal;
      padding: 1px 4px;
      color: white;
    }
  }

  > mask {
    padding: 0;
    background: black;
  }

  > image {
    -gtk-icon-size: 16px;
    margin-top: -4px;
    margin-bottom: -4px;
  }

  &.needs-attention > indicator {
    background: $selected_bg_color;

    > label { color: $selected_fg_color; }
  }

  &.badge {
    > indicator,
    > mask {
      min-height: 13px;
    }

    > indicator > label {
      font-size: 0.6rem;
      font-weight: bold;
      padding-left: 4px;
      padding-right: 4px;
      color: white;
    }

    &.needs-attention > indicator {
      background: $selected_bg_color;

      > label { color: $selected_fg_color; }
    }
  }
}

headerbar > windowhandle > box viewswitcher {
  min-height: 0;

  &.narrow > button.toggle {
    border-radius: 0;
    margin: 0;

    indicatorbin > image {
      -gtk-icon-size: 12px;
    }
  }

  &.wide {
    box-shadow: inset 0 0 0 1px $light_borders_color;
    border-radius: $bt_radius;
    padding: 0;

    > button.toggle {
      margin: 0;
      min-height: 0;
      font-weight: 500;
      border-radius: $bt_radius;

      &:not(:first-child) {
        border-width: 0 0 0 1px;
        border-style: none solid none none;
        border-image: linear-gradient(to bottom,
                                      transparent 16%,
                                      $light_borders_color 16%,
                                      $light_borders_color 84%,
                                      transparent 84%) 0 0 0 1 / 0 0 0 1px stretch;
      }

      &:hover, &:active, &:checked {
        border-image: none;
  
        & + button { border-image: none; }
      }
    }
  }
}


//
// Tab View
//

tabbar {
  .box {
    min-height: $menuitem_size;
  }

  .start-action,
  .end-action {
    padding: $container_padding;
  }

  .start-action:dir(ltr),
  .end-action:dir(rtl) {
    padding-right: 0;
  }

  .start-action:dir(rtl),
  .end-action:dir(ltr) {
    padding-left: 0;
  }

  &:not(.inline) {
    .box {
      color: $text_color;
      margin: 0;
      box-shadow: none;
      border-bottom: 1px solid $borders_color;

      @if $monterey == 'false' {
        padding: 0;
        background-color: color-mix(in srgb, black 15%, $header_bg);
      } @else {
        padding: $container_padding / 2 0;
        background-color: $header_bg;
      }
    }

    &:backdrop .box {
      > scrolledwindow,
      > .start-action,
      > .end-action {
        filter: opacity(0.5);
      }
    }
  }

  tabbox {
    border: none;
    padding: 0;
    box-shadow: none;
    background-color: transparent;
    min-height: $menuitem_size;

    > separator {
      margin: 0;
      background-color: $borders_color;

      &.hidden {
        opacity: 0;
      }
    }

    > revealer > indicator {
      min-width: 2px;
      border-radius: 2px;
      background: gtkalpha($selected_bg_color, 0.5);
    }

    > tabboxchild {
      border-radius: 0;
      margin: 0;

      @if $monterey == 'false' {
        &:first-child > tab {
          border-left: none;
        }

        &:last-child > tab {
          border-right: none;
        }
      }
    }

    > tab,
    > tabboxchild > tab {
      @if $monterey == 'false' {
        @extend %tabs_tab;
        border-top: none;
        border-bottom: none;
      } @else {
        @extend %monterey_tab;
      }

      button.tab-close-button {
        border-radius: 3px;
        border: none;
        padding: 0;
        margin-right: -$container_padding / 2;
        @extend %flat_button;

        @if $monterey == 'false' {
          min-height: $small_size;
          min-width: $small_size;
          margin-top: 2px;
          margin-bottom: 2px;
        } @else {
          min-height: 16px;
          min-width: 16px;
          margin-top: 4px;
          margin-bottom: 4px;
        }

        &:hover {
          color: $fg_color;
          background-color: gtkalpha(currentColor, 0.1);
        }

        &:active, &:active:hover {
          color: $text_color;
          background-color: gtkalpha(currentColor, 0.2);
        }
      }
    }
  }

  scrolledwindow:not(.pinned) {
    tabbox > tabboxchild {
      @if $monterey == 'false' {
        margin: 0 -3px;
      } @else {
        margin: 0;
      }
    }
  }
}

dnd tab {
  background-color: $base_color;
  color: $text_color;
  box-shadow: none;
  margin: $container_padding * 4;
}

tabbar,
dnd {
  tab {
    margin: 0;

    @if $monterey == 'false' {
      @extend %tabs_tab;
    } @else {
      @extend %monterey_tab;
    }

    button.tab-close-button {
      border-radius: 3px;
      min-height: $small_size;
      min-width: $small_size;
      padding: 0;
    }

    indicator {
      min-height: 2px;
      border-radius: 2px;
      background: gtkalpha($selected_bg_color, 0.5);
    }
  }
}

tabview:drop(active),
tabbox:drop(active) {
  box-shadow: none;
}

// Transition shadows
flap,
leaflet,
navigation-view,
overlay-split-view {
  @include transition-shadows($dark_borders_color);
}

toolbarview.undershoot-top scrolledwindow {
  @include undershoot(top);
}

toolbarview.undershoot-bottom scrolledwindow {
  @include undershoot(bottom);
}

// Sidebar
.unfolded stacksidebar.sidebar { border: none; }

.sidebar-pane {
  background-color: $dark_sidebar_bg;
  color: $dark_sidebar_fg;

  &:backdrop {
    background-color: $bg_color;
    transition: background-color $longer_duration $deceleration_curve;
  }

  .sidebar,
  .toolbar,
  headerbar,
  .navigation-sidebar,
  searchbar > revealer > box {
    background-color: transparent;
    box-shadow: none;
    border: none;
  }

  .toolbar {
    padding: $container_padding $container_padding * 2;
  }

  .navigation-sidebar:not(.view) {
    padding: $container_padding * 2;

    > row {
      &:selected {
        background-color: $selected_bg_color;
        color: $selected_fg_color;
      }
    }
  }

  toolbarview.undershoot-top scrolledwindow {
    @include undershoot(top, $style: 'compact');
  }

  toolbarview.undershoot-bottom scrolledwindow {
    @include undershoot(bottom, $style: 'compact');
  }

  scrolledwindow {
    &.undershoot-top {
      @include undershoot(top, $style: 'compact');
    }

    &.undershoot-bottom {
      @include undershoot(bottom, $style: 'compact');
    }

    &.undershoot-start {
      &:dir(ltr) { @include undershoot(left, $style: 'compact'); }
      &:dir(rtl) { @include undershoot(right, $style: 'compact'); }
    }

    &.undershoot-end {
      &:dir(ltr) { @include undershoot(right, $style: 'compact'); }
      &:dir(rtl) { @include undershoot(left, $style: 'compact'); }
    }
  }

  flap,
  leaflet,
  navigation-view,
  overlay-split-view {
    @include transition-shadows($dark_borders_color);
  }

  banner > revealer > widget {
    background-color: gtkmix($selected_bg_color, $dark_sidebar_bg, 30%);
    color: $text_color;

    &:backdrop {
      background-color: gtkmix($selected_bg_color, $dark_sidebar_bg, 30%);
    }
  }

  &:dir(ltr), &.end:dir(rtl) {
    &, banner > revealer > widget {
      box-shadow: inset -1px 0 6px rgba(black, if($variant == 'light', 0.04, 0.08));
      border-right: 1px solid $dark_sidebar_border;
    }
  }

  &:dir(rtl), &.end:dir(ltr) {
    &, banner > revealer > widget {
      box-shadow: inset 1px 0 6px rgba(black, if($variant == 'light', 0.04, 0.08));
      border-left: 1px solid $dark_sidebar_border;
    }
  }
}

/* Middle pane in three-pane setups */
.content-pane .sidebar-pane,
.sidebar-pane .content-pane {
  background-color: $base_color;
  color: $text_color;

  &:backdrop {
    background-color: $bg_color;
    transition: background-color $longer_duration $deceleration_curve;
  }

  toolbarview.undershoot-top scrolledwindow {
    @include undershoot(top, $style: 'compact');
  }

  toolbarview.undershoot-bottom scrolledwindow {
    @include undershoot(bottom, $style: 'compact');
  }

  scrolledwindow {
    &.undershoot-top {
      @include undershoot(top, $style: 'compact');
    }

    &.undershoot-bottom {
      @include undershoot(bottom, $style: 'compact');
    }

    &.undershoot-start {
      &:dir(ltr) { @include undershoot(left, $style: 'compact'); }
      &:dir(rtl) { @include undershoot(right, $style: 'compact'); }
    }

    &.undershoot-end {
      &:dir(ltr) { @include undershoot(right, $style: 'compact'); }
      &:dir(rtl) { @include undershoot(left, $style: 'compact'); }
    }
  }

  flap,
  leaflet,
  navigation-view,
  overlay-split-view {
    @include transition-shadows($dark_borders_color);
  }

  banner > revealer > widget {
    background-color: gtkmix($selected_bg_color, $base_color, 30%);
    color: $text_color;

    &:backdrop {
      background-color: gtkmix($selected_bg_color, $base_color, 30%);
    }
  }

  &:dir(ltr), &.end:dir(rtl) {
    &, banner > revealer > widget {
      box-shadow: inset -1px 0 6px rgba(black, if($variant == 'light', 0.04, 0.08));
      border-right: 1px solid $dark_sidebar_border;
    }
  }

  &:dir(rtl), &.end:dir(ltr) {
    &, banner > revealer > widget {
      box-shadow: inset 1px 0 6px rgba(black, if($variant == 'light', 0.04, 0.08));
      border-left: 1px solid $dark_sidebar_border;
    }
  }
}

.sidebar-pane .sidebar-pane {
  background-color: transparent;
  color: inherit;
}

.content-pane {
  background-color: $base_color;

  toolbarview {
    &, &.view {
      background-color: transparent;
    }

    > stack, > box > stack.view {
      background-color: transparent;
    }
  }

  notebook > stack box > switch {
    margin: 14px 0;
  }

  list.background {
    background-color: transparent;
  }
}

// Gnome >= 45.0
.sidebar-pane,
.content-pane {
  headerbar {
    &, &:backdrop {
      background-color: transparent;
      box-shadow: none;
      border: none;
    }
  }
}

//
// AdwToolbarView
//

toolbarview {
  > .top-bar,
  > .bottom-bar {
    searchbar,
    actionbar {
      > revealer > box {
        background-color: transparent;
        border: none;
        box-shadow: none;
      }
    }

    .toolbar  {
      background-color: transparent;
    }

    .collapse-spacing {
      padding-top: 0;
      padding-bottom: 0;

      headerbar {
        min-height: $headerbar_size;

        > windowhandle > box {
          padding-top: 8px;
          padding-bottom: 8px;

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

        &.default-decoration {
          min-height: $medium_size;

          > windowhandle > box {
            padding-top: 0;
            padding-bottom: 0;
          }
        }
      }

      searchbar,
      actionbar {
        > revealer > box {
          padding-top: $container_padding;
          padding-bottom: $container_padding;
        }
      }

      .toolbar  {
        padding-top: $container_padding;
        padding-bottom: $container_padding;
      }

      tabbar {
        padding-top: 0;
        padding-bottom: 0;
      }
    }

    &.raised {
      background-color: transparent;
      color: $header_fg;

      &:backdrop {
        background-color: transparent;
      }
    }

    &:backdrop > windowhandle {
      filter: none;
    }
  }

  > .bottom-bar {
    padding: 0;
    border-spacing: 0;
    box-shadow: inset 0 1px $borders_color;
    background-color: color-mix(in srgb, black 5%, $bg_color);
    color: $text_color;

    &:backdrop {
      background-color: $bg_color;
      color: $disabled_fg_color;
    }

    actionbar { @extend %actionbar-inline; }
  }

  > .top-bar.raised {
    box-shadow: none;

    &.border {
      box-shadow: none;
    }
  }

  > .bottom-bar.raised {
    box-shadow: none;

    &.border {
      box-shadow: none;
    }
  }
}

//
// AdwDialog
//

floating-sheet {
  > dimming {
    background-color: rgba(black, 0.35);
  }

  > sheet {
    border-radius: $wm_radius;
    outline: 1px solid $highlight_color;
    outline-offset: -1px;
    box-shadow: 0 3px 6px $wm_shadow,
                0 7px 12px $wm_shadow,
                0 12px 20px $wm_shadow,
                $wm_outline;
  }
}

dialog.bottom-sheet {
  &.landscape sheet {
    margin-left: 30px;
    margin-right: 30px;

    > outline {
      &.flush-left, &.flush-right, &.flush-left.flush-right {
        box-shadow: $wm_outline;
      }
    }
  }
}

dialog-host > dialog.background {
  background: none;

  sheet {
    background-color: $bg_color;
    color: $fg_color;
  }
}

dialog-host > dialog.view {
  background: none;

  sheet {
    @extend %view;
  }
}

dialog-host > dialog.osd:not(progressbar):not(button):not(menubutton):not(splitbutton) {
  background: none;

  sheet {
    @extend %osd;
  }
}

// ThemeSelector
themeselector, // Gnome text editor
panelthemeselector { // Gnome builder
  margin: 9px;

  checkbutton {
    padding: 0;
    min-height: 44px;
    min-width: 44px;
    padding: 1px;
    background-clip: content-box;
    border-radius: $circular_radius;
    box-shadow: inset 0 0 0 1px $borders_color;

    &.follow:checked,
    &.light:checked,
    &.dark:checked {
      box-shadow: inset 0 0 0 2px $primary_color;
    }

    &.follow {
      background-image: linear-gradient(to bottom right, #ffffff 50%, #202020 50%);
    }

    &.light {
      background-color: #ffffff;
    }

    &.dark {
      background-color: #202020;
    }

    &.theme-selector radio {
      -gtk-icon-source: none;
      border: none;
      background: none;
      box-shadow: none;
      min-width: 12px;
      min-height: 12px;
      transform: translate(27px, 14px);
      padding: 3px;

      &:hover, &:active, &:checked {
        background-color: transparent;
      }

      &:checked {
        -gtk-icon-source: -gtk-icontheme("object-select-symbolic");
        color: white;
        background-color: $primary_color;

        &, &:hover, &:active {
          box-shadow: 0 2px 3px -1px rgba(black, 0.08), 0 1px 2px 0 rgba(black, 0.1);
        }
      }
    }
  }
}

themeswitcher { // Gnome console
  padding: 6px;

  .check {
    min-height: 20px;
    min-width: 20px;
    background: none;
    padding: 0;
    margin: 0;
    border-radius: $circular_radius;
    color: white;
    background-color: $primary_color;

    &, &:hover, &:active {
      box-shadow: 0 2px 3px -1px rgba(black, 0.08), 0 1px 2px 0 rgba(black, 0.1);
    }
  }

  checkbutton {
    padding: 0;
    min-height: 44px;
    min-width: 44px;
    padding: 1px;
    background-clip: content-box;
    border-radius: $circular_radius;
    box-shadow: inset 0 0 0 1px $borders_color;

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

    radio {
      &, &:hover, &:active, &:checked, &:checked:hover, &:checked:active {
        background-color: transparent;
        border: none;
        background: none;
        box-shadow: none;
        color: transparent;
        -gtk-icon-source: none;
        -gtk-icon-size: 0;
      }
    }

    &.system {
      background: linear-gradient(-45deg, #1e1e1e 50%, white 50%);
    }

    &.light {
      color: gtkalpha(black, .8);
      background-color: white;
    }

    &.dark {
      color: white;
      background-color: #1e1e1e;
    }
  }
}