@charset "UTF-8";


// buttons

@mixin button($t, $c:b_color(normal), $tc:b_color(text)) {
//
// 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: $tc;
    border-color: if($c!=b_color(normal), $c, $border_color);
    background-image: button_gradient($c, normal);
  }

  @else if $t==hover {
  //
  // hovered button
  //
    color: $tc;
    border-color: if($c!=b_color(normal), $c, b_color(hover));
  }

  @else if $t==active {
  //
  // pushed button
  //
    color: if($tc==b_color(text),b_color(active-text), $tc);
    border-color: if($c!=b_color(normal), $c, b_color(active));
    background-image: if($c!=b_color(normal), button_gradient($c, active),
                                          button_gradient(b_color(active),active));
  }

  @else if $t==active-hover {
  //
  //
  //
    color: $tc;
    border-color: if($c!=b_color(normal), transparentize($c, 0.5), b_color(hover));
    background-image: if($c!=b_color(normal), button_gradient(transparentize($c, 0.5),active),
                                        button_gradient(b_color(hover),active));
  }

  @else if $t==insensitive {
  //
  // insensitive button
  //
    color: if($tc!=b_color(text),insensitive($tc),insensitive(b_color(text)));
    border-color: if($c!=b_color(normal), insensitive($c), insensitive($border_color));
    background-image: if($c!=b_color(normal), button_gradient(insensitive($c), normal),
                                          button_gradient(insensitive(b_color(normal)), normal));
    > .label { color: inherit; }
  }

  @else if $t==insensitive-active {
  //
  // insensitive pushed button
  //
    color: if($tc!=b_color(text), insensitive($tc), insensitive(b_color(active-text)));
    border-color: insensitive(b_color(active));
    background-image: if($c!=b_color(normal), button_gradient(insensitive($c), active),
                                          button_gradient(insensitive(b_color(active)),active));
    > .label { color: inherit; }
  }

  @else if $t==backdrop {
  //
  // backdrop button
  //
    color: backdrop($tc);
    border-color: backdrop($border_color);
    background-image: button_gradient(backdrop($c), normal);
  }

  @else if $t==backdrop-active {
  //
  // backdrop pushed button
  //
    color: if($tc!=b_color(text), backdrop($tc), backdrop(b_color(active-text)));
    border-color: if($c!=b_color(normal), backdrop($c), backdrop(b_color(active)));
    background-image: if($c!=b_color(normal), button_gradient(backdrop($c), active),
                                          button_gradient(backdrop(b_color(active)),active));
  }

  @else if $t==backdrop-insensitive {
  //
  // backdrop insensitive button
  //
    color: backdrop(insensitive($tc));
    border-color: if($c!=b_color(normal), backdrop(insensitive($c)), backdrop(insensitive($border_color)));
    background-image: button_gradient(backdrop(insensitive($c)));
    > .label { color: inherit; }
  }

  @else if $t==backdrop-insensitive-active {
  //
  // backdrop insensitive pushed button
  //
    color: if($c!=b_color(normal), backdrop(insensitive($tc)), backdrop(insensitive(b_color(active-text))));
    border-color: if($c!=b_color(normal), backdrop(insensitive($c)), backdrop(insensitive(b_color(active))));
    background-image: if($c!=b_color(normal), button_gradient(backdrop(insensitive($c)), active),
                                          button_gradient(backdrop(insensitive(b_color(active))),active));
    > .label { color: inherit; }
  }

  @else if $t==undecorated {
  //
  // reset
  //
    border-color: transparentize(white,1);  //FIXME needed?
    background-color: transparent;
    background-image: none;
	  box-shadow:none;
    color: $tc;

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

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

// stuff for .needs-attention
$_dot_color: b_color(active);
@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(s_color(normal)),
                                    to(transparent));
  }
}

%buttons {

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

    border: 1px solid;
    border-radius: $r;
    padding: 4px 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 { transition: $_button_transition; }
      }
      &:checked { background-color: $border_color;}
    }
    &:hover {
      @include button(hover);
      -gtk-icon-effect: none;  // Do we want this?
    }
    &:active, &:checked {
      @include button(active);
      transition-duration: 50ms;
      &:hover {
  	  @include button(active-hover);
        }
    }
   &:backdrop {
     @include button(backdrop);
     -gtk-icon-effect: none;
     &:active, &:checked {
       @include button(backdrop-active);
     }
     &:disabled {
       @include button(backdrop-insensitive);
     }
     &:disabled:active, &:disabled:checked {
       @include button(backdrop-insensitive-active);
     }
   }
    &.flat:backdrop {
      -gtk-icon-effect: none;
      @include button(undecorated);
      color: backdrop(b_color(text));
    }
    &.flat:disabled {
      @include button(undecorated);
      color: insensitive(b_color(text));
    }
    &.flat:backdrop:disabled {
      @include button(undecorated);
      color: backdrop(insensitive(b_color(text)));
    }
    &:disabled {
      @include button(insensitive);
      &:active, &:checked {
        @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: s_color(normal);

      &.flat:not(:active):not(:checked):not(:hover):not(disabled) {
        color: s_color(text);
        border-color: transparent;

        &:backdrop { color: backdrop(s_color(text)); }
      }
    }
  }

  // Suggested and Destructive Action buttons
  @each $b_type, $button_color in (suggested-action, b_color(active)),
                              (destructive-action, $error_color) {
    &.#{$b_type},
    &.#{$b_type}.osd & {
      @include button(normal, $button_color, b_color(active-text));
      &.flat {
        @include button(undecorated);
        color: $button_color;
      }
      &:hover { @include button(hover, $button_color, white); }  //FIXME no hardcoded colors
      &:active, &:checked { @include button(active, $button_color, white); }
      &:backdrop, &.flat:backdrop {
        @include button(backdrop, $button_color, white);
        &:active, &:checked {
          @include button(backdrop-active, $button_color, white);
        }
        &:disabled {
          @include button(backdrop-insensitive);
          &:active, &:checked {
            @include button(backdrop-insensitive-active, $button_color, white);
          }
        }
      }
      &.flat:backdrop, &.flat:disabled, &.flat:backdrop:disabled {
        @include button(undecorated);
        color: transparentize($button_color, 0.2);
      }
      &:disabled {
        @include button(insensitive);
        &:active, &:checked {
          @include button(insensitive-active, $button_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: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 > &:checked,
  .linked > &:backdrop { @extend %linked; }

  .linked.vertical > &,
  .linked.vertical > &:hover,
  .linked.vertical > &:active,
  .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: b_color(text);
  $_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;
}
