/*
 * Most of this is adapted directly from the elementaryOS stylesheet.
 * https://github.com/elementary/stylesheet/blob/master/gtk-3.0/granite-widgets.css
 * Original code copyright (c) 2016 elementary LLC. (http://launchpad.net/egtk)
 *
 * Modifications copyright (c) 2017 System76, Inc.
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public
 * License as published by the Free Software Foundation; either
 * version 2 of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * General Public License for more details.
 *
 * You should have received a copy of the GNU General Public
 * License along with this program; if not, write to the
 * Free Software Foundation, Inc., 59 Temple Place - Suite 330,
 * Boston, MA 02111-1307, USA.
 *
 * Authored by:
 *              Daniel Fore <daniel@elementary.io>
 *              Ian Santopietro <ian@system76.com>
 */

/****************
 * Back Buttons *
 ****************/

button.back-button,
.titlebar .back-button {
  background-image: -gtk-icontheme("go-previous-symbolic");
  background-size: $small_size;
  background-position: 12px 50%;
  background-color: transparent;
  background-repeat: no-repeat no-repeat;
  padding-left: $standard_padding * 3;
  box-shadow: none;
}


/***************
 * Text Styles *
 ***************/

.h1 {
  font-size: 24px;
}

.h2 {
  font-weight: 300;
  font-size: 18px;
}

.h3 {
  font-size: 11px;
}

.h4,
.category-label {
  font-weight: bold;
}

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

list .h4,
listbox .h4 {
  padding-left: 6px;
}

/***********
 * Welcome *
 ***********/

.welcome {
  font-size: 10px;
  text-shadow: none;
}

.welcome .dim-label {
  color: $secondary_fg_color;
}

.welcome .h1,
.welcome .h3 {
  color: rgba($fg_color, 0.8);
}

/***************
 * Storage Bar *
 ***************/

.storage-bar .trough {
  box-shadow: $shadow_2;
  border: none;
  background-image: none;
  padding: $small_padding $tiny_padding;
}

.storage-bar .fill-block {
  background-color: darken($darker_bg_color, 15%);
  border: $border_size solid rgba($black, 0.35);
  border-left-width: 0;
  border-right-width: 0;
  border-top-width: 0;
  border-bottom-width: $border_size;
  border-bottom-color: darken($darker_bg_color, 35%);
  padding: $small_padding $tiny_padding;
}

.storage-bar .empty-block {
  background-color: darken($alt_base_color, 5%);
  border-bottom-width: $border_size;
  border-bottom-color: darken($alt_base_color, 40%);
}

.storage-bar .app {
  background-color: $purple_500;
  border-bottom-width: $border_size;
  border-bottom-color: darken($purple_500, 20%);
}

.storage-bar .audio {
  background-color: $orange_500;
  border-bottom-width: $border_size;
  border-bottom-color: darken($orange_500, 20%);
}

.storage-bar .files {
  background-color: $blue_500;
  border-bottom-width: $border_size;
  border-bottom-color: darken($blue_500, 20%);
}

.storage-bar .photo {
  background-color: $green_500;
  border-bottom-width: $border_size;
  border-bottom-color: darken($green_500, 20%);
}

.storage-bar .video {
  background-color: $red_500;
  border-bottom-width: $border_size;
  border-bottom-color: darken($red_500, 40%);
}

.storage-bar .legend {
  padding: $small_padding;
  border-radius: 50%;
}

/**************
 * Round Apps *
 **************/

window.rounded,
window.rounded .action-bar {
  border-radius: 0 0 $material_radius $material_radius;
}

window.rounded.window-frame {
  border-radius: $material_radius;
}

window.rounded decoration {
  border-radius: $material_radius;
}

/******************
 * Pantheon Panel *
 ******************/

.panel {
  background-color: $panel_bg_color;
  transition: all 100ms ease-in-out;
  font-weight: normal;
}

/**********
 * Harvey *
 **********/

// Lots of custom styling in Harvey, for obvious reasons. Let's try and make it
// look good in Pocillo without modifying the original app design.

window.background.csd.rounded > grid.titlebar {
  min-height: 0;

  > headerbar.input-header {
    border-top-right-radius: 0;
    
    background-color: $bg_color;

    > box.left > button.close { 
      color: $fg_color;
      &:backdrop {
        background-color: $divider_color;
      }
    }
  }
}


/************
 * Spice-Up *
 ************/

window.csd {
> overlay > stack > grid.app-back > revealer > box.toolbar {
  box.frame {
    button.image-button,
    button.entry,
    entry {
      background-color: transparent;
      box-shadow: none;
    }
  }
}

headerbar.titlebar {
  button.suggested-action { background-color: $suggested_color;}
}
}


/*************
 * AppCenter *
 *************/

row.activatable > grid.horizontal > stack {
  padding: $small_padding;
}

/**********
 * Photos *
 **********/

.checkerboard-layout {
  background-color: $dark_neutral_gray;
  background-image:
    linear-gradient(
      45deg,
      rgba($literally_black, 0.1) 25%,
      transparent 25%,
      transparent 75%,
      rgba($literally_black, 0.1) 75%,
      rgba($literally_black, 0.1)
    ),
    linear-gradient(
      45deg,
      rgba($literally_black, 0.1) 25%,
      transparent 25%,
      transparent 75%,
      rgba($literally_black, 0.1) 75%,
      rgba($literally_black, 0.1)
    );
  background-size: $medium_size $medium_size;
  background-position: 0 0, 12px 12px;
}

.checkboard-layout .item {
  background-color: $grey_200;
}

/************
 * Terminal *
 ************/
 
// Search bar background
.search-bar {
  background-color: $bg_color;
  
  entry {
    background-color: rgba($inverse_fg_color, 0.1);
  }
} 

.color-button {
  border: 1px solid $border_color;
  -gtk-outline-radius: 50%;
}

/*************
 * Titlebars *
 *************/

.csd .default-decoration {
  padding-top: 0;
  padding-bottom: 0;
  min-height: $titlebar_size;

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

  .title {
    padding-top: $tiny_padding;
    padding-bottom: $tiny_padding;
  }
}
