@charset "UTF-8";


// buttons

@mixin button($t) {
// $c:gtk("@theme_button_background_normal"), $tc:gtk("@theme_button_foreground_normal")
//
// Button drawing function
//
// $t:    button type,
// $c:    base button color for colored* types
// $tc:   optional text color for colored* types
// $edge: set to none to not draw the bottom edge or specify a color to not
//        use the default one
//
// possible $t values:
// normal, hover, active, insensitive, insensitive-active,
// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
//

  @if $t==normal {
  //
  // normal button
  //
    box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    text-shadow: none;
    -gtk-icon-shadow: none;

    color: gtk("@theme_button_foreground_normal");
    border-color: gtk("@borders");
    background-color: gtk("@theme_button_background_normal");
  }

  @else if $t==hover {
  //
  // hovered button
  //
    color: gtk("@theme_button_foreground_normal");
    border-color: gtk("@theme_button_decoration_hover");
  }

  @else if $t==active {
  //
  // pushed button
  //
    color: gtk("@theme_button_foreground_active");
    border-color: gtk("@theme_button_decoration_focus");
    background-color: gtk("@theme_button_decoration_focus");
  }

  @else if $t==active-hover {
  //
  //
  //
    color: gtk("@theme_button_foreground_normal");
    border-color: gtk("@theme_button_decoration_hover");
    background-color: gtk("@theme_button_decoration_hover");
  }

  @else if $t==insensitive {
  //
  // insensitive button
  //
    color: gtk("@theme_button_foreground_insensitive");
    border-color: gtk("@insensitive_borders");
    background-color: gtk("@theme_button_background_insensitive");

    > .label { color: inherit; }
  }

  @else if $t==insensitive-active {
  //
  // insensitive pushed button
  //
    color: gtk("@theme_button_foreground_active_insensitive");
    border-color: gtk("@theme_button_decoration_focus_insensitive");
    background-color: gtk("@theme_button_decoration_focus_insensitive");
    > .label { color: inherit; }
  }

  @else if $t==backdrop {
  //
  // backdrop button
  //
    color: gtk("@theme_button_foreground_backdrop");
    border-color: gtk("@unfocused_borders");
    background-color: gtk("@theme_button_background_backdrop");
  }

  @else if $t==backdrop-hover {
  //
  // backdrop hover button
  //
    color: gtk("@theme_button_foreground_backdrop");
    border-color: gtk("@theme_button_decoration_hover");
    background-color: gtk("@theme_button_background_backdrop");
  }

  @else if $t==backdrop-active {
  //
  // backdrop pushed button
  //
    color: gtk("@theme_button_foreground_active_backdrop");
    border-color: gtk("@theme_button_decoration_focus_backdrop");
    background-color: gtk("@theme_button_decoration_focus_backdrop");
  }

  @else if $t==backdrop-insensitive {
  //
  // backdrop insensitive button
  //
    color: gtk("@theme_button_foreground_backdrop_insensitive");
    border-color: gtk("@unfocused_insensitive_borders");
    background-color: gtk("@theme_button_background_backdrop_insensitive");
    > .label { color: inherit; }
  }

  @else if $t==backdrop-insensitive-active {
  //
  // backdrop insensitive pushed button
  //
    color: gtk("@theme_button_foreground_active_backdrop_insensitive");
    border-color: gtk("@theme_button_decoration_focus_backdrop_insensitive");
    background-color: gtk("@theme_button_decoration_focus_backdrop_insensitive");
    > .label { color: inherit; }
  }

  @else if $t==undecorated {
  //
  // reset
  //
    border-color: transparent;
    background-color: transparent;
    background-image: none;
	  box-shadow:none;
    color: gtk("@theme_button_foreground_normal");

    text-shadow: none;
    -gtk-icon-shadow: none;
  }
}

/***********
 * Buttons *
 ***********/

// stuff for .needs-attention
$_dot_color: gtk("@theme_button_decoration_focus");
@keyframes needs_attention {
  from {
    background-image: -gtk-gradient(radial,
                                    center center, 0,
                                    center center, 0.01,
                                    to($_dot_color),
                                    to(transparent));
  }
  to {
    background-image: -gtk-gradient(radial,
                                    center center, 0,
                                    center center, 0.5,
                                    to(gtk("@theme_selected_bg_color")),
                                    to(transparent));
  }
}

%buttons {

    $_button_transition: all 200ms $ease-out-quad;

    border: 1px solid;
    border-radius: $r;
    padding: 6px 6px;
    background-clip: border-box;
    transition: $_button_transition;
    @include button(normal);
    &.flat {
      @include button(undecorated);
      // to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set
      // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
      // it won't fade out when the pointer leave the button allocation area. To make the transition more evident
      // in this case the duration is increased.
      transition: none;
      &:hover {
        transition: $_button_transition;
        transition-duration: 500ms;
        &:active, &:focus { transition: $_button_transition; }
      }
      &:checked { background-color: gtk("@borders");}
    }
    &:hover {
      @include button(hover);
      -gtk-icon-effect: none;  // Do we want this?
    }
    &:active, &:checked, &:focus {
      @include button(active);
      transition-duration: 50ms;
      &:hover {
  	  @include button(active-hover);
        }
    }
   &:backdrop {
     @include button(backdrop);
     -gtk-icon-effect: none;
     &:hover {
       @include button(backdrop-hover);
     }
     &:active, &:checked, &:focus {
       @include button(backdrop-active);
     }
     &:disabled {
       @include button(backdrop-insensitive);
     }
     &:disabled:active, &:disabled:checked, &:disabled:focus {
       @include button(backdrop-insensitive-active);
     }
   }
    &.flat:backdrop {
      -gtk-icon-effect: none;
      @include button(undecorated);
      color: gtk("@theme_button_foreground_backdrop");
    }
    &.flat:disabled {
      @include button(undecorated);
      color: gtk("@theme_button_foreground_insensitive");
    }
    &.flat:backdrop:disabled {
      @include button(undecorated);
      color: gtk("@theme_button_foreground_backdrop_insensitive");
    }
    &:disabled {
      @include button(insensitive);
      &:active, &:checked, &:focus {
        @include button(insensitive-active);
      }
    }
    separator {
      background-color: transparent;
      background-image: none;
      color: transparent;
    }
}
%button,
button {
  @at-root %button_basic, & {
    @extend %buttons;
    &.osd {
      @extend %buttons;
    }
    //overlay / OSD style
    .osd & {
      //@extend %buttons;
    }

    &.image-button {
      min-width:16px;
      padding: 6px;
    }

    &.text-button {
      padding-left: 6px;
      padding-right: 6px;
    }

    &.text-button.image-button {
      padding-left: 6px;
      padding-right: 6px;
      label {
        padding-left: 6px;
        padding-right: 6px;
      }
    }
    // FIXME
    // &:drop(active) {
    //   color: $drop_target_color;
    //   border-color: $drop_target_color;
    //   box-shadow: inset 0 0 0 1px $drop_target_color;
    // }
  }

  @at-root %button_selected, & {
    row:selected & {
      border-color: gtk("@theme_selected_bg_color");

      &.flat:not(:active):not(:checked):not(:hover):not(disabled) {
        color: gtk("@theme_selected_fg_color");
        border-color: transparent;

        &:backdrop { 
          color: gtk("@theme_unfocused_selected_fg_color");
        }
      }
    }
  }

  // Suggested and Destructive Action buttons
  @each $b_type, $button_color in (suggested-action, gtk("@theme_button_decoration_focus")),
                              (destructive-action, gtk("@error_color")) {
    &.#{$b_type},
    &.#{$b_type}.osd & {
      @include button(normal);
      background-color: $button_color;
      color: gtk("@theme_button_foreground_active");
      &.flat {
        @include button(undecorated);
        color: $button_color;
      }
      &:hover { 
        @include button(hover); 
        color: white; //! FIXME - No hardcoded colors.
        background-color: $button_color;
      }
      &:active, &:checked, &:focus { 
        @include button(active); 
        background-color: $button_color;
        color: white;
      }
      &:backdrop, &.flat:backdrop {
        @include button(backdrop);
        background-color: $button_color;
        color: white;
        &:active, &:checked, &:focus {
          @include button(backdrop-active);
          background-color: $button_color;
          color: white;
        }
        &:disabled {
          @include button(backdrop-insensitive);
          &:active, &:checked, &:focus {
            @include button(backdrop-insensitive-active);
            background-color: $button_color;
            color: white;
          }
        }
      }
      &.flat:backdrop, &.flat:disabled, &.flat:backdrop:disabled {
        @include button(undecorated);
        color: gtkalpha($button_color, 0.8);
      }
      &:disabled {
        @include button(insensitive);
        &:active, &:checked, &:focus {
          @include button(insensitive-active);
          background-color: $button_color;
          color: white;
        }
      }
    }
  }


  .stack-switcher > & {
    // to position the needs attention dot, padding is added to the button
    // child, a label needs just lateral padding while an icon needs vertical
    // padding added too.
    > label {
      padding-left: 6px;  // label padding
      padding-right: 6px; //
    }
    > image {
      padding-left: 6px;   // image padding
      padding-right: 6px;  //
      padding-top: 3px;    //
      padding-bottom: 3px; //
    }
    &.text-button {
      padding: 6px; // needed or it will get overridden
    }
    &.image-button {
      // we want image buttons to have a 1:1 aspect ratio, so compensation
      // of the padding added to the GtkImage is needed
      padding: 3px 0px;
    }
    &.needs-attention > label,
    &.needs-attention > image { @extend %needs_attention; }
    &.needs-attention:active > label,
    &.needs-attention:active > image,
    &.needs-attention:focus > label,
    &.needs-attention:focus > image,
    &.needs-attention:checked > label,
    &.needs-attention:checked > image {
      animation: none;
      background-image: none;
    }
  }

  //inline-toolbar buttons
  .inline-toolbar &, .inline-toolbar &:backdrop {
    border-radius: $r;
    border-width: 1px;
    @extend %linked;
  }

  .primary-toolbar & { -gtk-icon-shadow: none; }

  .linked > &,
  .linked > &:hover,
  .linked > &:active,
  .linked > &:focus,
  .linked > &:checked,
  .linked > &:backdrop { @extend %linked; }

  .linked.vertical > &,
  .linked.vertical > &:hover,
  .linked.vertical > &:active,
  .linked.vertical > &:focus,
  .linked.vertical > &:checked,
  .linked.vertical > &:backdrop { @extend %linked_vertical; }
}

/**************
 * ComboBoxes *
 **************/
 combobox {
   arrow {
     -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
     min-height: 16px;
     min-width: 16px;
   }

   &.linked {
     button:nth-child(2) {
       &:dir(ltr) { @extend %linked:last-child; }
       &:dir(rtl) { @extend %linked:first-child; }
     }
   }

  //  &:drop(active) { // FIXME: untested
  //    box-shadow: none;
   //
  //    button.combo { @extend %button_basic:drop(active); }
   //}
 }

 .linked > combobox > box > button.combo {
   // the combo is a composite widget so the way we do button linking doesn't
   // work, special case needed. See
   // https://bugzilla.gnome.org/show_bug.cgi?id=733979

   &:dir(ltr),
   &:dir(rtl) { @extend %linked_middle; } // specificity bump
 }

 .linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
 .linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
 .linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }

 .linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
 .linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
 .linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
 .linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }


%needs_attention {
  animation: needs_attention 150ms ease-in;
  $_dot_shadow: gtk("@theme_button_foreground_normal");
  $_dot_shadow_r: 0.5;
  background-image: -gtk-gradient(radial,
                                  center center, 0,
                                  center center, 0.5,
                                  to($_dot_color),
                                  to(transparent)),
                    -gtk-gradient(radial,
                                  center center, 0,
                                  center center, $_dot_shadow_r,
                                  to($_dot_shadow),
                                  to(transparent));
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  background-position: right 3px, right 4px;
  &:backdrop {background-size: 6px 6px, 0 0;}
  &:dir(rtl) {
    background-position: left 3px, left 4px;
  }
}

%linked_middle {
  border-radius: $r;
  &:dir(rtl) {
    border-radius: $r; // needed when including %linked_middle:dir(rtl)
  }
}

%linked {
  margin-left: 2px;
  margin-right: 2px;
  @extend %linked_middle;
  &:first-child {
    border-radius: $r;
    border-style: solid;
  }
  &:last-child {
    border-radius: $r;
    &:dir(rtl) { }
  }
  &:only-child {
    border-radius: $r;
    border-style: solid;
  }
}

%linked_vertical_middle {
  border-style: solid;
  border-radius: $r;
}

%linked_vertical{
  @extend %linked_vertical_middle;
  &:first-child {
    border-radius: $r;
  }
  &:last-child {
    border-radius: $r;
    border-style: solid;
  }
  &:only-child {
    border-radius: $r;
    border-style: solid;
  }
}

%undecorated_button {
  border-color: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow:none;
  text-shadow: none;
  -gtk-icon-shadow: none;
}
