/***************
 * Header Bars *
 ***************/

%titlebar,
.header-bar {
  padding:0 8px;
  border: none;
  border-radius: 4px 4px 0 0;

  background-color: $headerbar_bg_color;
  color: $headerbar_fg_color;

  box-shadow: inset 0 1px $top_highlight;

  &:backdrop {
    background-color: $headerbar_bg_color;
    color: $backdrop_headerbar_fg_color;

    box-shadow: inset 0 1px transparentize($top_highlight, 0.4);

    transition: $backdrop_transition;
  }

  .title {
    font-weight: bold;
    padding-left: 12px;
    padding-right: 12px;
    color: $headerbar_fg_color;

    &:backdrop {
      color:$backdrop_headerbar_fg_color;
    }
  }

  .subtitle {
    font-size: smaller;
    padding-left: 12px;
    padding-right: 12px;
    color: $headerbar_fg_color;

    @extend .dim-label;
  }

  // selection mode
  &.selection-mode {

    border-radius: 4px 4px 0 0;

    color: $selected_fg_color;
    text-shadow: 0 -1px transparentize(black, 0.5);
    border-color: $selected_borders_color;

    background-color: $selection_mode_headerbar_bg_color;
    box-shadow: inset 0 1px $top_highlight;

    &:backdrop {
      background-color: darken($selection_mode_headerbar_bg_color, 10%);
      background-image: none;
      box-shadow: inset 0 1px transparentize($top_highlight, 0.4);
    }

    .subtitle:link { @extend *:link:selected; }

    .selection-menu {
      &:backdrop, & {
        border-color: transparentize($selected_bg_color, 1);
        background-image: linear-gradient(to bottom, transparentize($selected_bg_color, 1));
        box-shadow: none;
        text-shadow: none;
        padding-left: 10px;
        padding-right: 10px;

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

        .arrow {
          -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
          color: transparentize($selected_fg_color,0.5);
          icon-shadow: none;
        }
      }
    }
  }

  .tiled &,
  .maximized & { &:backdrop, & { border-radius: 0; }} // squared corners when the window is maximized or tiled

  &.default-decoration {
    padding: 6px;
    background-color: $headerbar_bg_color;
    color: $headerbar_fg_color;

    .maximized {
      padding: 6px;
      border-radius:0;  
    }

    &:backdrop {
      background-color: $backdrop_headerbar_bg_color;
      color: $backdrop_headerbar_fg_color;
    }
  }

  // Entries

  .entry {

    margin:6px 0;
    border-radius: 2px;
    padding: 4px;

    border: none;
    box-shadow: none;
    background: transparentize($base_color, 0.05);
    color: $fg_color;
    box-shadow: 0 1px 0 0 transparentize(black, 0.8);

    > .image {
      padding-right: 6px;
      color: transparentize($fg_color, 0.2);
    }

    &:active,
    &:focus {
      background: $base_color;
      color: $fg_color;

      box-shadow: 0 1px 2px 0 transparentize(black, 0.6);

      > .image {
        padding-right: 6px;
        color: $fg_color;
      }

      &:backdrop {
        background: transparentize($base_color, 0.2);
        color: transparentize($fg_color, 0.5);
        box-shadow: none;
      }
    }

    &:insensitive {
      background: transparentize($base_color, 0.4);
      color: transparentize($fg_color, 0.5);
      box-shadow: none;

      > .image {
        padding-right: 6px;
        color: transparentize($fg_color, 0.5);
      }

        &:backdrop {
          background: transparentize($base_color, 0.5);
          color: transparentize($fg_color, 0.5);
          box-shadow: none;
        }
    }

    &:backdrop {
      background: transparentize($base_color, 0.2);
      color: transparentize($fg_color, 0.5);
      box-shadow: none;

      > .image {
        color: transparentize($fg_color, 0.5);
      }
    }
  }

  // Buttons

  // header bar buttons have no backgrounds or borders
  .button {
    background-color: transparent;
    background-image: none;
    border-radius: 0px;
    border: none;
    box-shadow: none;
    icon-shadow: none;
    margin: 0;
    padding: 10px;
    text-shadow: none;

    &.back-button,
    &.suggested-action,
    &.menu-button,
    &.text-button,
    &.image-button,
    &.linked,
    &.flat {
      background-color: transparent;
      background-image: none;
      border-radius: 0px;
      border: none;
      box-shadow: none;
      icon-shadow: none;
      margin: 0;
      padding: 10px;
      text-shadow: none;
      color: $headerbar_fg_color;

      &:backdrop {
        background-color: transparent;
        background-image: none;
        text-shadow: none;
        color: $backdrop_headerbar_fg_color;
      }

      &:hover { 
        background-image:none;
        background-color: transparentize(black, 0.85);
        color:lighten($headerbar_fg_color, 10%);
        box-shadow:none;
        text-shadow:none;
      }
    }

    GtkLabel,
    GtkImage {
      color: $headerbar_fg_color;

      &:backdrop {
        color: $backdrop_headerbar_fg_color;
      }
    }

    &:focus,
    &:hover { 
      background-image:none;
      background-color: transparentize(black, 0.85);
      color:lighten($headerbar_fg_color, 10%);
      box-shadow:none;
      text-shadow:none;
    }

    &:backdrop {
      background-color: transparent;
      background-image: none;
      color: $backdrop_headerbar_fg_color;

      GtkImage {
        color: $backdrop_headerbar_fg_color;
      }
    }

    &:active,
    &:checked {
      border-radius: 0px;

      text-shadow: none;
      icon-shadow: none;
      
      box-shadow: inset 0 -2px 0 0 $headerbar_fg_color;

      background-color: transparent;
      background-image: none;
      color: $headerbar_fg_color;

      &:backdrop {
        background-color: transparent;
        background-image: none;
        color: $backdrop_headerbar_fg_color;

        box-shadow: inset 0 -2px 0 0 $backdrop_headerbar_fg_color;
      }

      &:focus,
      &:hover { 
        background-image:none;
        background-color: transparentize(black, 0.85);
        color:lighten($headerbar_fg_color, 10%);
        box-shadow: inset 0 -2px 0 0 $headerbar_fg_color;
      }
    }

    &:insensitive,
    &:insensitive:backdrop {
      color: $backdrop_headerbar_fg_color;
      background-color: transparent;
      background-image: none;

      image,
      GtkImage {
        -gtk-image-effect: dim;
      }
    }

    // Title Button
    &.titlebutton {
      background-color:transparent;
      background-image: none;
      border-radius:50%;
      border: none;
      box-shadow: none;
      icon-shadow: none;
      margin: 0;
      padding: 1px;
      text-shadow: none;
      color:$headerbar_fg_color;

      &:hover {
        background-color:transparentize($headerbar_fg_color, 0.9);
        color:lighten($headerbar_fg_color, 10%);
      }

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

      &:active {
        background-color:$headerbar_fg_color;
        color:$headerbar_bg_color;
        border-radius:50%;
        box-shadow:none;

        GtkImage {
          color:$headerbar_bg_color;
        }
      }
    }

    // Linked button
    &.linked {
      &:first-child,
      &:last-child {
        border-radius:0;
      }
    }
  }

  // Separator

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

.titlebar {
  &, &:backdrop {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
}

.header-bar {
  .separator:first-child + &,
  separator:first-child + &, // tackles the paned container case
  &:first-child { &, &:backdrop { border-top-left-radius: 4px; }}

  &:last-child { &, &:backdrop { border-top-right-radius: 4px; }}
}

.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: $headerbar_bg_color;
    background-image: none;
    border-style: none;
    border-color: transparent;
    box-shadow: none;

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

  @extend %titlebar;
}