/***************
 * Header bars *
 ***************/
%titlebar,
headerbar {
  transition: background-color $shorter_duration $deceleration_curve, color $longer_duration $deceleration_curve;
  min-height: $headerbar_size;
  padding: 0 $tiny_padding;
  box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
  background-color: $titlebar_bg_color;
  color: $titlebar_fg_color;

  &:disabled :not(button) > label { color: $titlebar_disabled_fg_color; }

  &:backdrop {
    color: $titlebar_secondary_fg_color;
    background-color: $inactive_titlebar_bg_color;

    &:disabled :not(button) > label { color: $titlebar_disabled_secondary_fg_color; }
  }

  .title {
    padding: 0 $standard_padding;
    font-weight: bold;
  }

  .subtitle {
    padding: 0 $standard_padding;
    font-size: smaller;

    @extend .dim-label;
  }

  separator {
    background-color: $titlebar_bg_color;
    margin: 0 $standard_padding;

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

    &:first-child,
    &:last-child {
      margin: 0;
      min-width: 0;
      padding: 0;
    }
  }

  .linked:not(.vertical) > entry:not(.flat) { border-radius: $other_radius; }

  button:not(.suggested-action):not(.destructive-action) {
    @extend %flat_button;

    &.titlebutton {
      padding: $mini_padding * 2;
      min-width: $close_button_size;
      min-height: $close_button_size;

	  &.close {
 	    background-color: mix($destructive_color, $accent_color, 50%);

	    color: $white;

	    &:backdrop {
		  background-color: $inverse_divider_color;
		  color: $titlebar_fg_color;
	    }
      }

      &.appmenu > image {
        padding: $tiny_padding;
        min-width: $small_size;
        min-height: $small_size;
      }
    }

    border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                  $titlebar_indicator_color 0%,
                                  transparent 0%)
                                  0 0 0 / 0 0 0px;
    color: $titlebar_secondary_fg_color;

    &:hover, &:active { color: $titlebar_fg_color; }

    &:disabled { color: $titlebar_disabled_secondary_fg_color; }

    &:checked {
      border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                    $titlebar_indicator_color 100%,
                                    transparent 0%)
                                    0 0 2 / 0 0 2px;
      color: $titlebar_fg_color;

      &:disabled { color: $titlebar_disabled_fg_color; }

      &, &:disabled { background-color: transparent; }
    }

    &:backdrop {
      color: $titlebar_hint_fg_color;

      &:hover, &:active { color: $titlebar_secondary_fg_color; }

      &:disabled { color: $titlebar_disabled_secondary_fg_color; }

      &:checked {
        color: $titlebar_secondary_fg_color;

        &:disabled { color: $titlebar_disabled_secondary_fg_color; }
      }
    }
  }

  button.suggested-action, button.destructive-action {
    &:disabled {
      background-color: $titlebar_divider_color;
      color: $titlebar_disabled_fg_color;
    }
  }

  &.selection-mode {
    transition: background-color 250ms $longer_duration, color $longer_duration $deceleration_curve;
    animation: header_ripple_effect $longer_duration $deceleration_curve;
    box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
    background-color: $primary_color;
    color: $inverse_fg_color;

    &:backdrop {
      color: $inverse_secondary_fg_color;
    }

    .subtitle:link { @extend %link_selected; }

    button:not(.suggested-action):not(.destructive-action) {
      border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                    currentColor 0%,
                                    transparent 0%)
                                    0 0 0 / 0 0 0px;
      color: $inverse_fg_color;

      &:disabled { color: $inverse_disabled_fg_color; }

      &:checked {
        border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                      $accent_color 100%,
                                      transparent 0%)
                                      0 0 2 / 0 0 2px;
        color: $inverse_fg_color;

        &:disabled { color: $inverse_disabled_fg_color; }
      }

      &:backdrop {
        color: $inverse_secondary_fg_color;

        &:disabled { color: $inverse_disabled_secondary_fg_color; }

        &:checked {
          color: $inverse_secondary_fg_color;

          &:disabled { color: $inverse_disabled_secondary_fg_color; }
        }
      }
    }

    .selection-menu {
      padding-left: $large_padding;
      padding-right: $large_padding;

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

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

  .tiled &,
  .maximized &,
  .fullscreen &,
  .tiled-bottom &,
  .tiled-top &,
  .tiled-left &,
  .tiled-right & {
    border-radius: 0; // squared corners when the window is maximized, tiled, or fullscreen
    box-shadow: $shadow_1;
  }

  &.default-decoration {
    min-height: $medium_size;
    padding: $tiny_padding;
    box-shadow: inset 0 1px $titlebar_highlight_color;

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

    button.titlebutton {
      min-height: $medium_size;
      min-width: $medium_size;
      margin: 0;
      padding: 0;
    }

    // workaround for non-animatable buttons
    .background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
  }

  .solid-csd & {
    &:dir(rtl), &:dir(ltr) { // specificity bump
      // margin-left: -2px;
      // margin-right: -2px;
      // margin-top: -2px;
      // border-radius: 0;
      // box-shadow: inset 0 1px $titlebar_highlight_color;
    }
  }
}

headerbar {
  // add vertical margins to common widget on the headerbar to avoid them spanning the whole height
  spinbutton,
  // separator,
  button {
    margin-top: $tiny_padding;
    margin-bottom: $tiny_padding;
  }

  switch {
    margin-top: $tiny_padding * 2;
    margin-bottom: $tiny_padding * 2;
  }

  // reset button margins of the spinbutton
  spinbutton button {
    margin-top: 0;
    margin-bottom: 0;
  }
}

.background:not(.tiled):not(.tiled-bottom):not(.tiled-top):not(.tiled-left):not(.tiled-right):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
  border-top-left-radius: $other_radius;
  border-top-right-radius: $other_radius;
}

headerbar { // headerbar border rounding
  window:not(.tiled):not(.tiled-bottom):not(.tiled-top):not(.tiled-left):not(.tiled-right):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
  window:not(.tiled):not(.tiled-bottom):not(.tiled-top):not(.tiled-left):not(.tiled-right):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: $other_radius; }

  window:not(.tiled):not(.tiled-bottom):not(.tiled-top):not(.tiled-left):not(.tiled-right):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: $other_radius; }

  window:not(.tiled):not(.tiled-bottom):not(.tiled-top):not(.tiled-left):not(.tiled-right):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
    &:first-child, &:last-child {
      border-top-left-radius: $other_radius;
      border-top-right-radius: $other_radius;
    }
  }
}

window.tiled,
window.maximized,
window.fullscreen,
window.tiled-bottom,
window.tiled-top,
window.tiled-left,
window.tiled-right {
  headerbar {
    border-radius: 0;
  }
}

.titlebar:not(headerbar) {
  window.csd > & {
    // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
    padding: 0;
    background-color: transparent;
    background-image: none;
    border-style: none;
    box-shadow: none;
  }

  > separator {
    background: $titlebar_bg_color;
    color: $titlebar_bg_color;
    border: none;
    padding: 0;
    margin: 0;

    &:backdrop {
      background-color: $inactive_titlebar_bg_color;
      color: $inactive_titlebar_bg_color;
      border-color: $inactive_titlebar_bg_color;
    }
  }

  @extend %titlebar;

  button.titlebutton{
    padding: $mini_padding * 2;
    min-width: $close_button_size;
    min-height: $close_button_size;
  }

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