$card_shadow: 0 0 0 1px transparentize(black, 0.97),
              0 1px 3px 1px transparentize(black, .93),
              0 2px 6px 2px transparentize(black, .97);

// Decoration
window.rounded,
window.rounded actionbar {
  border-radius: 0 0 $window_radius $window_radius;
  
  decoration {
    border-radius: $window_radius;
  }
}

window.flat headerbar {
  box-shadow: none;
}

// Text formatting
.accent {
  color: $selected_bg_color;
}

.h1 {
  font-size: 20pt;
  font-weight: 300;
}

.h2 {
  font-size: 16pt;
  font-weight: 200;
}

.h3 {
  font-size: 11pt;
}

.h4,
.category-label {
  color: gtkshade($fg_color, 1.2);
  font-weight: 700;
}

.h4 {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

list .h4 {
  padding-left: 0.5em;
}

// Storage Bar widget
.storage-bar {
  .trough {
    padding: 8px 6px;
    border: none;
    border-radius: $button_radius $button_radius 0 0;
    background-image: none;
    box-shadow: $card_shadow;
  }

  .fill-block {
    padding: 8px 6px;
    border: 1px solid rgba(black, 0.35);
    border-top-width: 0;
    border-right-width: 0;
    border-bottom-width: 1px;
    border-left-width: 0;
    border-radius: 0;
    border-bottom-color: gtkshade($borders_color, 0.75);
    background-color: gtkshade($base_color, 0.85);

    &:first-child { border-radius: $button_radius 0 0; }
    &:last-child { border-radius: 0 $button_radius 0 0; }
    &:only-child { border-radius: $button_radius $button_radius 0 0; }

    image { -gtk-icon-style: symbolic; }
  }

  .empty-block {
    border-bottom-width: 1px;
    border-bottom-color: gtkshade($borders_color, 0.6);
    background-color: gtkshade($base_color, 0.95);

    image { color: black; }
  }

  .app {
    border-bottom-width: 1px;
    border-bottom-color: gtkshade($purple_1, 0.7);
    background-color: $purple_1;

    image { color: white; }
  }

  .audio {
    border-bottom-width: 1px;
    border-bottom-color: gtkshade($orange_2, 0.8);
    background-color: $orange_2;

    image { color: black; }
  }

  .files {
    border-bottom-width: 1px;
    border-bottom-color: gtkshade($blue_1, 0.8);
    background-color: $blue_1;

    image { color: black; }
  }

  .photo {
    border-bottom-width: 1px;
    border-bottom-color: gtkshade($green_2, 0.7);
    background-color: $green_2;

    image { color: black; }
  }

  .video {
    border-bottom-width: 1px;
    border-bottom-color: gtkshade($red_1, 0.8);
    background-color: $red_1;

    image { color: white; }
  }

  .legend {
    padding: 8px;
    border-radius: 50%;

    image { color: black; }
  }
  
  .disk-bar {
    padding: 0;
    border-radius: $button_radius;   
    background-color: $brown_1;
  } 

  .ext2, .ext3, .ext4, .fat16, .fat32, .btrfs, 
  .xfs,  .ntfs, .luks, .lvm,   .none,  .swap , .unused {
    // sass-lint:disable-block indentation
    border: none;
    box-shadow: 
      inset 0 -2px rgba($dark_2, 0.5),
      inset 1px 0 rgba($dark_2, 0.5),
      inset -1px 0 rgba($dark_2, 0.5);
  }

  .swap { 
    background-color: $red_5;

    image { color: white; }
  }

  .ext4 { 
    background-color: $green_2;

    image { color: black; }
  }

  .ext3 { 
    background-color: $green_5;

    image { color: white; }
  }

  .ext2 { 
    background-color: $green_1;

    image { color: black; }
  }

  .fat16, 
  .fat32 { 
    background-color: $yellow_2;

    image { color: black; }
  }

  .btrfs { 
    background-color: $blue_5;

    image { color: white; }
  }

  .xfs { 
    background-color: $blue_1;

    image { color: black; }
  }

  .ntfs { 
    background-color: $orange_2;

    image { color: black; }
  }

  .luks { 
    background-color: $purple_2;

    image { color: black; }
  }

  .lvm { 
    background-color: $purple_1;

    image { color: black; }
  }

  .none { 
    background-color: $blue_1;

    image { color: black; }
  }

  .unused { 
    background-color: $brown_1;

    image { color: black; }
  }

  .legend { box-shadow: none; }
}

// Granite popover
GraniteWidgetsPopOver {
  -GraniteWidgetsPopOver-arrow-width: 21;
  -GraniteWidgetsPopOver-arrow-height: 10;
  -GraniteWidgetsPopOver-border-radius: $popover_radius;
  -GraniteWidgetsPopOver-border-width: 0;
  -GraniteWidgetsPopOver-shadow-size: 12;
  
  border: 1px solid $base_color;
  background: $base_color;
  color: $fg_color;

  .button {
    background-image: none;
    background: none;
    border: none;

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

  > .frame {
    border:none;
  }

  .sidebar.view {
    border: none;
    background: none;
  }
}

GraniteWidgetsStaticNotebook .frame {
  border: none;
}

.popover_bg {
  background-color: $base_color;
  background-image: none;
  border: 1px solid $base_color;
  color: $fg_color;
}

// Cards
.deck {
  background-color: $base_color;
}

paper,
.card {
  transition: all 300ms cubic-bezier(0.25, 0.8, 0.25, 1);
  border: none;
  background-color: $base_color;  
  box-shadow: $card_shadow;

  &, &.rounded { border-radius: $card_radius; }

  &.collapsed {
    background-color: $bg_color;
  }
}

// Source list
.source-list {
  -GtkTreeView-horizontal-separator: 1px;
  -GtkTreeView-vertical-separator: 6px;

  background-color: $bg_color;
  border: solid $borders_color;
  color: $fg_color;
  border-right-width: 1px;

  .category-expander {
    color: transparent;
  }

  .badge {
    background-image: none;
    background-color: transparentize(black, 0.6);
    color: $bg_color;
    border-radius: 10px;
    padding: 0 6px;
    margin: 0 3px;
    border-width: 0;

    &:selected:backdrop,
    &:selected:hover:backdrop {
      background-color: transparentize(black, 0.8);
      color: gtkshade($bg_color, 0.95);
    }
  }

  row,
  .list-row {
    border:none;
    padding: 0;

    > GtkLabel,
    > label {
      padding-left: 6px;
      padding-right: 6px;
    }
  }
}

// Avatar
.avatar {
  border-radius: 999px;
  box-shadow: none;
}

// Overlay bar
.overlay-bar {
  padding: 4px;
}

// Dynamic notebook
.dynamic-notebook {
  tab {
    &.reorderable-page { padding: 8px; }
  }
}

// Scales
scale {
  &.temperature trough {
    background-image: linear-gradient(
      to right,
      rgba($blue_1, 0.4),
      $light_4,
      $yellow_1
    );
  }
  
  &.temperature:dir(rtl) trough {
    background-image: linear-gradient(
      to left,
      rgba($blue_1, 0.4),
      $light_4,
      $yellow_1
    );
  }
  
  &.warmth trough {
    background-image: linear-gradient(
      to right,
      rgba($yellow_1, 0.4),
      rgba($yellow_5, 0.6)
    );
  }
  &.warmth:dir(rtl) trough {
    background-image: linear-gradient(
      to left,
      rgba($yellow_1, 0.4),
      rgba($yellow_5, 0.6)
    );
  }
}

// Terminal
.terminal,
.terminal text {
  background-color: $dark_3;
  color: white;
  font-family: monospace;
  
  selection {
    background-color: $selected_bg_color;
    color: white;
  }

  &:backdrop {
    background-color: $dark_2;
    color: white;
  }
}

label.terminal {
  padding: 1em;
}

// Welcome
.welcome {
  font-size: 10pt;
  text-shadow: none;

  .dim-label { @extend .dim-label; }

  .h1, .h3 { color: gtkshade($fg_color, 1.2); }
}

// Back button
button.back-button,
button.back-button.text-button {
  padding-right: 8px;
  padding-left: 12px * 3;
  transition: $button_transition;
  background-image: -gtk-icontheme('go-previous-symbolic');
  background-repeat: no-repeat no-repeat;
  background-position: 5px 50%;
  background-size: 21px;
  
  .titlebar & {
    @include button(normal, $headerbar_bg_color, $headerbar_fg_color);
    background-color: $headerbar_bg_color;
    background-image: -gtk-icontheme('go-previous-symbolic');
    background-repeat: no-repeat no-repeat;
    background-position: 5px 50%;
    background-size: 21px;
    padding-left: 12px * 3;
    
    &:hover {
      @include button(hover, $headerbar_bg_color, $headerbar_fg_color);
      background-image: -gtk-icontheme('go-previous-symbolic');
      background-repeat: no-repeat no-repeat;
      background-position: 5px 50%;
      background-size: 21px;
    }
    
    &:active {
      @include button(active, $headerbar_bg_color, $headerbar_fg_color);
      background-image: -gtk-icontheme('go-previous-symbolic');
      background-repeat: no-repeat no-repeat;
      background-position: 5px 50%;
      background-size: 21px;
    }
  }
  
  &:dir(rtl) {
    padding: 0.5em 0.6em;
    padding-right: 12px * 3;
    padding-left: 8px;
    background-image: -gtk-icontheme('go-next-symbolic');
    background-repeat: no-repeat no-repeat;
    background-position: 90% 50%;
  }
}

// Checkerboard
.checkerboard {
  box-shadow: 0px 1px 2px 0px gtkalpha($borders_color, 0.5),
              0px 0px 0px 1px gtkalpha($borders_color, 0.5),
              0px 2px 0px 0px gtkalpha($borders_color, 0.5);
  border-radius: 2px;
  @extend %checkerboard;
}
