@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 {


  border: 1px solid;
  border-radius: $r;
  padding: 6px 6px;
  background-clip: border-box;

  @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.

    &:hover {

      transition-duration: 500ms;
      &:active,
      &:focus {

      }
    }
    &: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($arrow_down);
    min-height: 16px;
    min-width: 16px;
  }

  button {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  &.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;
}
