avatar {
  border-radius: 999px;
  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; }
}

$opaque_button_default_bg: mix($base_color, $fg_color, 85%);

button {
  &:disabled {
    filter: none;

    label {
      filter: none;
    }
  }

  &.text-button.image-button,
  &.image-text-button {
    > box,
    > box > box {
      border-spacing: 4px;

      > label {
        padding-left: 2px;
        padding-right: 2px;
      }
    }
  }

  &.arrow-button {
    > box { border-spacing: 4px; }

    &.text-button {
      > box { border-spacing: 4px; }
    }
  }

  @at-root %opaque_button {
    box-shadow: none;
    transition: $button_transition;

    .osd &:focus:focus-visible {
      outline: none;
    }

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

    &.keyboard-activating,
    &:active {
      background-image: image(transparentize(black, .8));
    }

    &:checked {
      background-image: image(transparentize(black, .85));

      &:hover {
        background-image: image(transparentize(black, .95));
      }

      &.keyboard-activating,
      &:active {
        background-image: image(transparentize(black, .7));
      }
    }
  }

  &.opaque {
    @extend %opaque_button;

    background-color: $opaque_button_default_bg;
    color: $fg_color;
  }

  &.destructive-action {
    @extend %opaque_button;

    color: $destructive_fg_color;

    &, &:checked {
      background-color: $destructive_color;
    }
  }

  &.suggested-action {
    @extend %opaque_button;

    color: $suggested_fg_color;

    &, &:checked {
      background-color: $suggested_color;
    }
  }

  // hide separators
  &.font {
    separator { background-color: transparent; }
    > box { border-spacing: 6px; }
    > box > box > label { font-weight: bold; }
  }

  @at-root %pill_button,
  &.pill {
    min-height: 28px;
    min-width: 28px;
    padding: 6px 12px;
    border-radius: 999px;
  }

  &.card {
    background-clip: padding-box;
    font-weight: inherit;
    padding: 0;
    @include button(normal);
    box-shadow: none;

    transition: $button_transition;

    &:hover {
      @include button(hover);
    }

    &.keyboard-activating,
    &:active {
      @include button(active);
    }

    &:checked {
      @include button(active);
    }

    &:drop(active) {
      color: $drop_target_color;
      box-shadow: inset 0 0 0 1px $drop_target_color;
    }
  }
}

menubutton {
  &.osd {
    background: none;
    color: inherit;

    > button { @extend %osd_button; }
  }

  &.circular > button { @extend %circular_button; }
  &.flat > button { @extend %flat_button; }
  &.pill > button { @extend %pill_button; }

  &.suggested-action {
    background-color: $suggested_color;
    color: $suggested_fg_color;
  }

  &.destructive-action {
    background-color: $destructive_color;
    color: $destructive_fg_color;
  }

  &.opaque {
    background-color: $opaque_button_default_bg;
    color: $fg_color;
  }

  &.suggested-action,
  &.destructive-action,
  &.opaque {
    border-radius: 2px;

    &.circular, &.pill {
      border-radius: 999px;
    }

    > button {
      @extend %opaque_button;

      &, &:checked {
        background-color: transparent;
        color: inherit;
      }
    }
  }

  &.image-button > button {
    min-width: 24px;
    padding-left: 6px;
    padding-right: 6px;
  }

  arrow {
    min-height: 16px;
    min-width: 16px;
    &.none {
      -gtk-icon-source: -gtk-icontheme('open-menu-symbolic');
    }
    &.down {
      -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
    }
    &.up {
      -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
    }
    &.left {
      -gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
    }
    &.right {
      -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
    }
  }
}

splitbutton {
  border-radius: 2px;

  &, & > separator {
    transition: $button_transition;
    transition-property: background;
  }

  > separator {
    margin-top: 6px;
    margin-bottom: 6px;
    background: none;
  }

  // Since the inner button doesn't have any style classes on it,
  // we have to add them manually
  &.image-button > button {
    min-width: 24px;
    padding-left: 6px;
    padding-right: 6px;
  }

  &.text-button.image-button > button,
  &.image-text-button > button {
    padding-left: 9px;
    padding-right: 9px;

    > box {
      border-spacing: 6px;
    }
  }

  // Reimplementing linked so we don't blow up css
  > button:dir(ltr),
  > menubutton > button:dir(rtl) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -1px;
  }

  > button:dir(rtl),
  > menubutton > button:dir(ltr) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
  }

  @at-root %flat_split_button,
  &.flat {
    > separator {
      background: $borders_color;
    }

    &:hover,
    &:active,
    &:checked {
      background: gtkalpha(currentColor, 0.1);
      color: $fg_color;

      > separator {
        background: none;
      }
    }

    &:focus-within:focus-visible > separator {
      background: none;
    }

    > button,
    > menubutton > button {
      @extend %flat_button;

      border-radius: 2px;
    }
  }

  &.suggested-action {
    background-color: $suggested_color;
    color: $suggested_fg_color;
  }

  &.destructive-action {
    background-color: $destructive_color;
    color: $destructive_fg_color;
  }

  &.opaque {
    background-color: $opaque_button_default_bg;
    color: $fg_color;
  }

  &.suggested-action,
  &.destructive-action,
  &.opaque {
    > button, > menubutton > button {
      @extend %opaque_button;

      &, &:checked {
        color: inherit;
        background-color: transparent;
      }
    }

    > menubutton > button {
      &:dir(ltr) { box-shadow: inset 1px 0 $borders_color; }
      &:dir(rtl) { box-shadow: inset -1px 0 $borders_color; }
    }
  }

  > menubutton > button > arrow.none {
    -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
  }
}

buttoncontent {
  border-spacing: 6px;

  > label {
    font-weight: bold;

    &:dir(ltr) { padding-right: 2px; }
    &:dir(rtl) { padding-left: 2px; }
  }

  .arrow-button > box > &,
  splitbutton > button > & {
    > label {
      &:dir(ltr) { padding-right: 0; }
      &:dir(rtl) { padding-left: 0; }
    }
  }
}

tabbutton {
  label {
    font-weight: 800;
    font-size: 8pt;

    &.small {
      font-size: 6pt;
    }
  }

  indicatorbin > indicator,
  indicatorbin > mask {
    transform: translate(-1px, 1px);
  }
}

checkbutton {
  border-spacing: 4px;
  border-radius: 2px;
  padding: 3px;

  .osd &:focus:focus-visible {
    outline: none;
  }

  &.text-button {
    // this is for a nice focus on check and radios text
    padding: 4px;
  }
}

//
// Check and Radio
//

check,
radio {
  box-shadow: none;
  border: none;
  outline: none;

  &:not(:checked):not(:indeterminate) {
    &:active {
      background-color: transparent;
    }
  }

  &:checked,
  &:indeterminate {
    background-color: transparent;
    box-shadow: none;

    &:hover { background-image: none; }
    &:active { background-image: none; }
  }

  &:disabled {
    filter: none;
  }

  .osd & {
    &:checked,
    &:indeterminate {
      background-color: transparent;
    }
  }
}

//
// AdwActionRow
//

 row {
  label.subtitle {
    font-size: smaller;
    @extend .dim-label;
  }

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

    > .icon:disabled {
      filter: opacity(0.45);
    }

    > box.title {
      margin-top: 6px;
      margin-bottom: 6px;
      border-spacing: 3px;
      padding: 0;

      // Specificity bump for header bar
      &,
      > .title,
      > .subtitle {
        padding: 0;
        font-weight: inherit;
      }
    }

    > .prefixes,
    > .suffixes {
      border-spacing: 6px;
    }

    > .icon,
    > .prefixes {
      &:dir(ltr) { margin-right: 6px; }
      &:dir(rtl) { margin-left: 6px; }
    }
  }
}

//
// AdwEntryRow
//

row.entry {
  outline: 2px solid transparent;
  border-radius: 2px;

  &.activatable.focused {
    outline: 2px solid $selected_bg_color;
  }

  &:not(:selected).activatable.focused:hover,
  &:not(:selected).activatable.focused:active {
    background-color: transparent;
  }

  &:disabled {
    text {
      opacity: 0.45;
    }

    .dim-label, .subtitle {
      opacity: 1;
    }
  }

  .edit-icon, .indicator {
    min-width: 24px;
    min-height: 24px;
    padding: 5px;
  }

  .edit-icon:disabled {
    opacity: 0.5;
  }

  .indicator {
    opacity: 0.65;
  }

  &.monospace {
    font-family: inherit;

    text {
      font-family: monospace;
    }
  }

  @each $e_type, $e_color, $e_fg_color in (error,   $error_color,   $error_fg_color),
                                          (warning, $warning_color, $warning_fg_color),
                                          (success, $success_color, $success_fg_color) {
    &.#{$e_type} {
      text {
        > selection:focus-within { background-color: gtkalpha($e_color, .2); }

        > cursor-handle > contents { background-color: currentColor; }
      }

      .dim-label, .subtitle {
        opacity: 1;
      }

      .suggested-action {
        background-color: $e_color;
        color: $e_fg_color;
      }
    }
  }
}

//
// AdwComboRow
//

row.combo {
  image.dropdown-arrow:disabled {
    filter: opacity(0.45);
  }

  listview.inline {
    background: none;
    border: none;
    box-shadow: none;
    color: inherit;

    &, &:disabled {
      background: none;
      color: inherit;
    }
  }

  popover > contents {
    min-width: 120px;
  }
}

//
// Toasts
//

toast {
  margin: 12px;
  margin-bottom: 24px;
  border-radius: 6px;
  border-spacing: 6px;
  padding: 6px;
  background-color: $base_color;
  color: $text_color;
  box-shadow: 0 3px 8px rgba(black, 0.15), 0 0 0 1px $borders_color;

  &:dir(ltr) { padding-left: 12px; }
  &:dir(rtl) { padding-right: 12px; }

  > widget {
    margin: 0 6px;
  }
}

//
// AdwAboutWindow
//

 window.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: $selected_bg_color;
      border-radius: 999px;
      margin-top: 3px;
    }
  }

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

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

//
// AdwStatusPage
//

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

    > clamp > box {
      border-spacing: 12px;

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

        color: gtkalpha(currentColor, 0.45);

        &:disabled {
          opacity: 0.45;
        }

        &: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: 12px;
        }
      }

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

// Cards
.card {
  @at-root %card, & {
    @include button(normal);
    border-radius: 2px;
    box-shadow: none;
    border: 1px solid $borders_color;
    background-clip: padding-box;

    .osd &, &.osd {
      @include button(osd);
    }
  }

  &.activatable {
    transition: $button_transition;

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

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

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

preferencesgroup > box {
  &, .labels {
    border-spacing: 6px;
  }

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

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

//
// viewswitcher
//

viewswitcher {
  margin: 0;

  headerbar & {
    margin: -6px 0;
  }

  button.toggle {
    &:hover {
      background-color: rgba($header_fg, 0.06);
      color: $header_fg;
    }

    &:active {
      background-color: rgba($header_fg, 0.16);
      color: $header_fg;
    }

    &:checked {
      background-color: rgba($header_fg, 0.08);
      color: $header_fg;
      box-shadow: inset 0 -3px $selected_bg_color;
    }
  }

  &.wide {
    border-spacing: 0;

    button.toggle {
      border-radius: 0;
      margin: 0;
      border: none;
    }
  }

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

  button.toggle {
    font-weight: bold;
    padding: 0;
    min-height: 0;
    border: none;

    > stack > box {
      &.narrow {
        font-size: 0.75rem;
        padding-top: 9px;
        padding-bottom: 3px;
        border-spacing: 3px;

        > stack > label {
          padding-left: 8px;
          padding-right: 8px;
        }
      }

      &.wide {
        padding: 0 12px;
        border-spacing: 6px;
      }
    }
  }
}

// AdwViewSwitcherBar
viewswitcherbar actionbar > revealer > box {
  padding: 0;

  viewswitcher {
    button.toggle {
      &:hover {
        background-color: rgba($fg_color, 0.06);
        color: $fg_color;
      }

      &:active {
        background-color: rgba($fg_color, 0.16);
        color: $fg_color;
      }

      &:checked {
        background-color: rgba($fg_color, 0.08);
        color: $fg_color;
        box-shadow: inset 0 3px $selected_bg_color;
      }
    }
  }
}

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

  viewswitcher {
    margin-left: 12px;
    margin-right: 12px;
  }

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

// AdwIndicatorBin
indicatorbin {
  > indicator, > mask {
    min-width: 6px;
    min-height: 6px;
    border-radius: 999px;
  }

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

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

  > mask {
    padding: 1px;
    background: black;
  }

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

    > label { color: $selected_fg_color; }
  }
}

//
// tab-view
//

tabbar {
  .box {
    min-height: 28px;
  }

  tabbox {
    padding: 0;

    > tabboxchild {
      @include focus-ring();

      border-radius: 0;
      margin-bottom: 0;
      margin-top: 0;
    }

    > separator {
      margin-top: 9px;
      margin-bottom: 9px;
      transition: opacity 150ms ease-in-out;

      &.hidden {
        opacity: 0;
      }
    }

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

  tab {
    transition: background 150ms ease-in-out;

    &:selected, &:checked {
      background-color: transparent;
      box-shadow: inset 0 -3px $selected_bg_color;
      color: $fg_color;
    }

    &:hover:not(:selected):not(:checked) {
      box-shadow: inset 0 -3px mix($selected_bg_color, $header_bg, 50%);
    }
  }

  .start-action,
  .end-action {
    padding: 5px;
  }

  .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 {
      background-color: $bg_color;
      color: $text_color;
      padding-bottom: 0;
      box-shadow: inset 0 -1px $borders_color;
      border: none;
    }

    &:backdrop .box {
      transition: $backdrop_transition;

      > scrolledwindow,
      > .start-action,
      > .end-action {
        filter: opacity(0.5);
        transition: $backdrop_transition;
      }
    }
  }
}

dnd tab {
  background-color: $bg_color;
  color: $text_color;
  box-shadow: none;
  margin: 24px;
}

tabbar,
dnd {
  tab {
    min-height: 28px;
    padding: 2px 6px 3px 6px;
    border-radius: 0;

    button.image-button {
      padding: 0;
      margin: 0;
      min-width: 20px;
      min-height: 20px;
      border-radius: 999px;
      border: none;

      &:hover {
        @extend %undecorated_button;
        color: lighten(red, 15%);
        background-color: darken($bg_color, 5%);
      }

      &:active {
        @extend %undecorated_button;
        color: $selected_bg_color;
        background-color: darken($bg_color, 8%);
      }
    }

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

tabgrid > tabgridchild {
  @include focus-ring(".card", $offset: 0, $outer: true);
}

tabthumbnail {
  &, > .card {
    border-radius: 3px;
  }

  > box {
    margin: 6px;
  }

  &:drop(active) {
    box-shadow: inset 0 0 0 3px gtkalpha($drop_target_color, .4);
    background-color: gtkalpha($drop_target_color, .1);
  }

  transition: box-shadow 200ms $ease-out-quad, background-color $ease-out-quad;

  .needs-attention {
    &:dir(ltr) { transform: translate(8px, -8px); }
    &:dir(rtl) { transform: translate(-8px, -8px); }

    > widget {
      background: $selected_bg_color;
      min-width: 12px;
      min-height: 12px;
      border-radius: 8px;
      margin: 3px;
      box-shadow: 0 1px 2px gtkalpha($selected_bg_color, .4);
    }
  }

  .card {
    picture {
      outline: none;
      border-radius: 3px;
    }

    background: none;
    color: inherit;
  }

  &.pinned .card {
    background-color: $base_color;
    color: $text_color;
  }

  .icon-title-box {
    border-spacing: 6px;
  }

  .tab-unpin-icon {
    margin: 6px;
    min-width: 24px;
    min-height: 24px;
  }

  button.circular {
    margin: 6px;
    background-color: gtkalpha($base_color, .75);
    min-width: 24px;
    min-height: 24px;

    &:hover {
      background-color: gtkalpha(gtkmix($base_color, currentColor, 90%), .75);
    }

    &:active {
      background-color: gtkalpha(gtkmix($base_color, currentColor, 80%), .75);
    }
  }
}

taboverview > .overview  .new-tab-button {
  margin: 18px;
}

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

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

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

preferencesgroup > box {
  &, .labels {
    border-spacing: 6px;
  }

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

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

  button.background-preview-button.toggle {
    padding: 0;
    background: none;
    box-shadow: none;
    outline-color: transparent;
    outline-width: 2px;
    outline-offset: 3px;
    outline-style: solid;
    border: none;

    &, > background-preview {
      border-radius: 2px;
    }

    &:hover {
      outline-color: rgba($fg_color, 0.06);
    }

    &:active {
      outline-color: rgba($fg_color, 0.2);
    }

    &:checked {
      outline-color: $selected_bg_color;
    }
  }
}


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

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

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

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

%sidebar_pane_list {
  > row {
    color: $dark_sidebar_fg;

    .sidebar-icon { color: rgba($dark_sidebar_fg, 0.6); }

    &:hover {
      color: $dark_sidebar_fg;
      background-color: $dark_sidebar_hover_color;
    }

    &:active {
      color: $dark_sidebar_fg;
      background-color: $dark_sidebar_active_color;
    }

    &:selected {
      background-color: $selected_bg_color;
      color: $selected_fg_color;
  
      &:hover {
        background-color: $alt_selected_bg_color;
        color: $selected_fg_color;
      }
    }

    &:disabled {
      color: rgba($dark_sidebar_fg, 0.45);
    }

    &:not(:selected) button.sidebar-button {
      color: $dark_sidebar_fg;

      &:hover { @include button(header-hover); }
      &:active { @include button(header-active); }

      &:not(:hover):not(:active) > image { opacity: 0.5 };
    }

    &:backdrop { opacity: 0.75; }
  }

  separator { background-color: transparent; }
}

$sidebar_pane_bg: if($header == 'dark' and $variant == 'light', $header_bg, $dark_sidebar_bg);
$sidebar_pane_fg: if($header == 'dark' and $variant == 'light', $header_fg, $dark_sidebar_fg);
$sidebar_pane_bg_backdrop: if($header == 'dark' and $variant == 'light', $header_bg_backdrop, $bg_color);

.sidebar-pane {
  background-color: $sidebar_pane_bg;
  color: $sidebar_pane_fg;

  &:backdrop {
    background-color: $sidebar_pane_bg_backdrop;
    color: rgba($sidebar_pane_fg, 0.45);
  }

  .dim-label { color: rgba($sidebar_pane_fg, 0.45); }

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

  headerbar {
    background-color: transparent;
    box-shadow: inset 0 1px $highlight;
    border: none;
    border-top-right-radius: 0;
  }

  .toolbar {
    padding: 6px;
  }

  .navigation-sidebar {
    @extend %sidebar_pane_list;
  }

  scrollbar { @extend %dark_sidebar_scrollbar; }

  entry { @extend %header_entry; }

  button { @extend %header_button; }

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

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

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

  &:dir(ltr), &.end:dir(rtl) {
    &, banner > revealer > widget {
      box-shadow: none;
      border-right: 1px solid $dark_sidebar_border;
    }
  }

  &:dir(rtl), &.end:dir(ltr) {
    &, banner > revealer > widget {
      box-shadow: none;
      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: $base_color;
    // transition: background-color $longer_duration $deceleration_curve;
  }

  flap,
  leaflet,
  navigation-view,
  overlay-split-view {
    @include transition-shadows($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: none;
      border-right: 1px solid $borders_color;
    }
  }

  &:dir(rtl), &.end:dir(ltr) {
    &, banner > revealer > widget {
      box-shadow: none;
      border-left: 1px solid $borders_color;
    }
  }
}

.sidebar-pane,
.content-pane,
.content-pane .sidebar-pane,
.sidebar-pane .content-pane {
  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'); }
    }
  }
}

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

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

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

  headerbar {
    border-top-left-radius: 0;

    @if $variant == 'light' and $header == 'dark' {
      color: $text_color;

      entry {
        @include entry(normal);

        &:focus-within {
          @include entry(focus);
        }

        &:disabled { @include entry(insensitive); }

        selection:focus-within {
          background-color: $selected_bg_color;
          color: $selected_fg_color;
        }
      }

      button:not(.close):not(.maximize):not(.minimize) {
        color: $text_color;

        &:hover {
          color: $fg_color;
          background-color: rgba($fg_color, 0.12);
        }

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

        &:disabled {
          color: $insensitive_fg_color;
      
          &:active, &:checked {
            @include button(insensitive-active);
          }
        }
      }

      viewswitcher {
        button.toggle:not(.close):not(.maximize):not(.minimize) {
          &:hover {
            background-color: rgba($fg_color, 0.06);
            color: $fg_color;
          }

          &:active {
            background-color: rgba($fg_color, 0.16);
            color: $fg_color;
          }

          &:checked {
            background-color: rgba($fg_color, 0.08);
            color: $fg_color;
            box-shadow: inset 0 -3px $selected_bg_color;
          }
        }
      }

      @if $variant == 'light' and $header == 'dark' {
        windowcontrols {
          button {
            @each $k in ('close', 'maximize', 'minimize') {
              @each $l, $m in ('',''), (':backdrop','-backdrop'), (':hover','-hover'), (':active','-active') {
                &.#{$k}#{$l} { background-image: -gtk-scaled(url('assets/titlebutton-#{$k}#{$m}.png'),
                                                             url('assets/titlebutton-#{$k}#{$m}@2.png'));
                }
              }
            }
          }
        }
      }
    }

    &, &:backdrop {
      background-color: transparent;
      box-shadow: inset 0 1px $highlight;
      border: none;
    }
  }

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

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

@if $variant == 'light' and $header == 'dark' {
  .fullscreen .content-pane headerbar windowcontrols,
  .maximized .content-pane headerbar windowcontrols {
    button {
      @each $l, $m in ('',''), (':backdrop','-backdrop'), (':hover','-hover'), (':active','-active') {
        &.maximize#{$l} { background-image: -gtk-scaled(url('assets/titlebutton-restore#{$m}#.png'),
                                                        url('assets/titlebutton-restore#{$m}@2.png'));
        }
      }
    }
  }
}

//
// 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: 42px;

        > windowhandle > box {
          padding-top: 6px;
          padding-bottom: 6px;
        }

        &.default-decoration {
          min-height: 28px;

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

      searchbar,
      actionbar {
        > revealer > box {
          padding-top: 6px;
          padding-bottom: 6px;
        }
      }

      .toolbar  {
        padding-top: 6px;
        padding-bottom: 6px;
      }

      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: $insensitive_fg_color;
    }

    actionbar > revealer > box {
      padding: 0;
    }
  }

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

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

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

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

//
// AdwBanner
//
banner {
  > revealer > widget {
    /* There are 2 more instances in _sidebars.css, keep in sync with that */
    background-color: gtkmix($selected_bg_color, $bg_color, 30%);
    color: $fg_color;
    padding: 6px;

    &:backdrop {
      background-color: gtkmix($selected_bg_color, $bg_color, 15%);
      transition: background-color $backdrop_transition;

      > label, > button {
        filter: opacity(.5);
        transition: filter $backdrop_transition;
      }
    }
  }
}

//
// AdwToggleGroup
//

$toggle_transition: color 200ms $ease-out-quad,
                    background 200ms $ease-out-quad,
                    box-shadow 200ms $ease-out-quad;

toggle-group {
  background: $button_bg;
  border: 1px solid $borders_color;
  border-radius: 4px;
  padding: 2px;
  background-clip: if($variant=='light', border-box, padding-box);

  &:disabled {
    background-color: gtkalpha($button_bg, 0.45);
  }

  > toggle {
    border-radius: 2px;
    font-weight: bold;
    min-width: 34px;
    min-height: 28px;
    @extend %flat_button;

    &.image-button > image:disabled {
      filter: opacity(0.55);
    }

    &.text-button {
      min-width: 24px;
      padding-left: 8px;
      padding-right: 8px;

      > label:disabled {
        filter: opacity(0.55);
      }
    }

    &.image-text-button {
      min-width: 16px;
      padding-left: 8px;
      padding-right: 8px;

      > buttoncontent > box > label {
        padding: 0;
      }

      > buttoncontent > box > image:disabled,
      > buttoncontent > box > label:disabled {
        filter: opacity(0.55);
      }
    }

    @include focus-ring($transition: $toggle_transition, $outer: true, $offset: 0);
  }

  &.vertical > toggle:not(.text-button):not(.image-text-button) {
    min-width: 28px;
  }

  &.osd,
  .osd & {
    padding: 2px;
  }

  > separator {
    transition: opacity 200ms $ease-out-quad;

    &.horizontal {
      margin: 3px 0;
    }

    &.vertical {
      margin: 0 3px;
    }

    &.hidden {
      opacity: 0;
    }

    &:disabled {
      filter: Opacity(0.45);
    }
  }

  &.round {
    border-radius: 999px;

    toggle {
      border-radius: 999px;

      &.text-button,
      &.image-text-button {
        padding-left: 12px;
        padding-right: 12px;
      }
    }

    separator {
      &.horizontal {
        margin: 6px 0;
      }

      &.vertical {
        margin: 0 6px;
      }
    }
  }

  &.flat {
    background: none;
    color: inherit;
    box-shadow: none;
    border: none;
    padding: 0;

    > toggle {
      @include focus-ring($transition: $button_transition);
    }

    > separator {
      background: none;
    }
  }
}

/*************************
 * AdwInlineViewSwitcher *
 *************************/

inline-view-switcher > toggle-group {
  &.icons > toggle {
    min-width: 34px;
  }

  &.labels > toggle {
    min-width: 12px;

    > widget > indicatorbin {
      padding-left: 8px;
      padding-right: 8px;

      > label {
        padding: 0 6px;
      }

      > indicator, > mask {
        transform: translateY(2px);
      }
    }
  }

  &.both > toggle {
    min-width: 16px;

    > widget > box {
      padding-left: 12px;
      padding-right: 12px;
      border-spacing: 6px;
    }
  }
}

//
// other
//
themeselector, // EditorThemeSelector
panelthemeselector { // BuilderThemeSelector
  margin: 9px;

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

    radio {
      min-height: 16px;
      min-width: 16px;
      transform: translate(27px, 14px);
      padding: 3px;

      &, &:hover, &:disabled {
        -gtk-icon-source: none;
        border: none;
        background: none;
        box-shadow: none;
      }

      &:checked, &:checked:hover, &:active, &:active:hover {
        -gtk-icon-source: -gtk-icontheme("object-select-symbolic");
        background-image: image($selected_bg_color);
        background-color: $selected_bg_color;
        color: $selected_fg_color;
      }
    }

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

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

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

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

// Gnome Console themeswitcher
themeswitcher {
  padding: 6px;

  .check {
    min-height: 16px;
    min-width: 16px;
    background-color: $selected_bg_color;
    color: $selected_fg_color;
    padding: 2px;
    border-radius: 100%;
    margin: 3px;
    -gtk-icon-size: 20px;
    -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/scalable/check-symbolic.svg")),
                                  -gtk-recolor(url("assets/scalable/check-symbolic@2.svg")));

    &:hover {
      background-color: lighten($selected_bg_color, 10%);
      color: $selected_fg_color;
    }

    &:active {
      background-color: $selected_bg_color;
      color: $selected_fg_color;
    }
  }

  checkbutton {
    radio {
      padding: 0;
      margin: 2px;
      min-height: 48px;
      min-width: 48px;

      &, &:active, &:hover {
        outline-color: $borders_color;
        outline-width: 1px;
        outline-offset: -1px;
        outline-style: solid;
        box-shadow: none;
      }

      &, &:hover, &:active, &:checked, &:checked:hover {
        -gtk-icon-source: none;
        transition: none;
        border: none;
      }
    }

    radio:checked, radio:active {
      &, &:hover {
        box-shadow: inset 0 0 0 2px $selected_bg_color;
      }
    }

    &.system radio {
      &, &:hover, &:active, &:checked, &:checked:hover {
        background-image: linear-gradient(-45deg, #242424 49.99%, white 50.01%);
        background-color: transparent;
      }
    }

    &.light radio {
      &, &:hover, &:active, &:checked, &:checked:hover {
        color: rgba(black, 0.8);
        background-color: white;
      }
    }

    &.dark radio {
      &, &:hover, &:active, &:checked, &:checked:hover {
        color: white;
        background-image: image(#242424);
        background-color: transparent;
      }
    }
  }
}

//
// Floating Sheet
//

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

  > sheet {
    border-radius: 3px;
    outline: none;
    box-shadow: 0 3px 5px if($variant == 'light', rgba(black, 0.15), rgba(black, 0.2)),
                0 5px 12px if($variant == 'light', rgba(black, 0.15), rgba(black, 0.2)),
                0 0 0 1px $_wm_border;
  }
}
