/****************
 * Text Entries *
 ****************/
%entry,
entry {
  %entry_basic, & {
    min-height: $entry_size;
    min-width: 7em;
    padding: $tiny_padding;
    border-top-left-radius: $pocillo_radius;
    border-top-right-radius: $pocillo_radius;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

    @include entry(normal);

    &:focus { @include entry(focus); }

    &:disabled { @include entry(disabled); }

    @at-root %entry_flat,
    &.flat {
      border-top-left-radius: $pocillo_radius;
      border-top-right-radius: $pocillo_radius;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;

      @include entry(flat-normal);

      &:focus { @include entry(flat-focus); }

      &:disabled { @include entry(flat-disabled); }
    }

    image { // icons inside the entry

      color: $secondary_fg_color;

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

      &:disabled { color: $hint_fg_color; }

      &.left {
        margin-left: $tiny_padding;
        margin-right: $tiny_padding;
      }

      &.right {
        margin-left: $tiny_padding;
        margin-right: $tiny_padding;
      }
    }

    undershoot {
      &.left { @include undershoot(left); }

      &.right { @include undershoot(right); }
    }

    selection { @extend %selected_items; }

    // entry error and warning style
    @each $e_type, $e_color in (error, $error_color),
                               (warning, $warning_color) {
      &.#{$e_type} {
        @include entry(normal, $e_color);

        &:focus { @include entry(focus, $e_color); }

        &:disabled { @include entry(disabled, $e_color); }

        &.flat {
          @include entry(flat-normal, $e_color);

          &:focus { @include entry(flat-focus, $e_color); }

          &:disabled { @include entry(flat-disabled, $e_color); }
        }

        image {
          color: $inverse_secondary_fg_color;

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

          &:disabled { color: $inverse_hint_fg_color; }
        }
      }
    }

    &:drop(active) {
      // box-shadow: inset 0 0 0 2px $accent_color;
    }

    .osd & {
    }
  }

  progress {
    margin: -$tiny_padding;
    border-bottom: $mini_size solid $primary_color;
    background-color: rgba($primary_color, 0.1);
    border-radius: $pocillo_radius $pocillo_radius 0 0;
  }

   // linked entries
  .linked:not(.vertical) > & { @extend %linked; }

  // Vertically linked entries
  .linked.vertical > & { @extend %linked_vertical; }

  .linked:not(.vertical) > &.flat,
  .linked.vertical > &.flat { border-radius: 0; }
}

treeview entry {
  &.flat, & {
    min-height: 0;
    padding: $mini_padding;
    border-radius: 0;
    background-color: $base_color;

    &, &:focus {
      border-image: none;
      box-shadow: none;
    }
  }
}

.entry-tag {
  $tag_height: $entry_size;
  $tag_margin: ($large_size - $tag_height) / 2;

  margin: $tag_margin; // instead of min-height: $tag_height;
  border-radius: $circular_radius;
  box-shadow: none;
  background-color: $primary_color;
  color: $inverse_fg_color;

  &:hover { box-shadow: $shadow_1; }

  // side margins: compensate the entry padding with a negative margin
  // then the negative margin itself
  :dir(ltr) & {
    margin-left: 8px;
    margin-right: $tag_margin - 8px;
    padding-left: 8px;
    padding-right: ($tag_height - 16px) / 2;
  }

  :dir(rtl) & {
    margin-left: $tag_margin - 8px;
    margin-right: 8px;
    padding-left: ($tag_height - 16px) / 2;
    padding-right: 8px;
  }

  // seems any sizing doesn't work
  &.button {
    box-shadow: none;
    background-color: transparent;

    &:not(:hover):not(:active) { color: $inverse_secondary_fg_color; }
  }
}

/*****************
 * GtkSpinButton *
 *****************/
spinbutton {
  &:not(.vertical) {
    // in this horizontal configuration, the whole spinbutton
    // behaves as the entry, so we extend the entry styling
    // and nuke the style on the internal entry
    @extend %entry;

    padding: $tiny_padding;

    %spinbutton_entry,
    entry {
      min-width: $entry_size * 2;
      // reset all the other props since the spinbutton node is styled here
      margin: 0;
      border-image: none;
      border-radius: 0;
      box-shadow: none;
      background-color: transparent;
      font-size: 52px;
      //
      // This will help to simplify spinbutton's code, but unfortunatelly
      // doesn't work properly in :dir(rtl). It needs z-index property.
      //
      // min-width: $large_size - 8px;
      //
      // $spinbuttons_width: $small_size * 2 + $container_padding * 3;
      //
      // &:dir(ltr) {
      //   margin-right: -$spinbuttons_width;
      //   padding-right: $spinbuttons_width;
      // }
      //
      // &:dir(rtl) {
      //   margin-left: -$spinbuttons_width;
      //   padding-left: $spinbuttons_width;
      // }
    }

    button {
      // margin: $container_padding;
      border: solid $container_padding transparent;

      @extend %simple_flat_button;

      @extend %small_button;

      &.up:dir(ltr),
      &.down:dir(rtl) { margin-left: -$container_padding / 2; }

      &.up:dir(rtl),
      &.down:dir(ltr) { margin-right: -$container_padding / 2; }
    }
  }

  // OSD horizontal
  .osd &:not(.vertical) {
    button {
    }
  }

  // Vertical
  &.vertical {
    // in the vertical configuration, we treat the spinbutton
    // as a box, and tweak the style of the entry in the middle
    // so that it's linked
    &:disabled { color: $disabled_fg_color; }

    &:drop(active) {
      box-shadow: none;
    }

    entry {
      min-height: $entry_size;
      min-width: $entry_size * 2;
      padding: $tiny_padding;
    }

    button {
      min-height: $entry_size;
      min-width: $entry_size;
      padding: $tiny_padding;

      @extend %simple_flat_button;

      &.up { border-radius: $pocillo_radius $pocillo_radius 0 0; }

      &.down { border-radius: 0 0 $pocillo_radius $pocillo_radius; }
    }
  }

  // OSD vertical
  .osd &.vertical button:first-child {
  }

  // Misc
  treeview &:not(.vertical) {
    min-height: 0;
    border-style: none;
    border-radius: 0;

    entry {
      min-height: 0;
      padding: 4px 4px;
    }
  }
}

toolbar {
  &:not(.inline-toolbar):not(.osd) {
    spinbutton { margin: $mini_padding; }
    .linked spinbutton {
      &:not(:first-child) { margin-left: 0; }
      &:not(:last-child) { margin-right: 0; }
    }
    spinbutton {
      button { margin: 0; }
    }
  }
}

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

  entry ~ button.combo {
    @include entry(normal)

    //&:focus { @include entry(focus)}
    &:disabled { @include entry(disabled)}

  }

  decoration,
  button.combo:checked { transition: none; } // workaround for menuitem selection

  button.combo cellview {
    &:dir(ltr) { margin-left: 8px - ($standard_padding - 16px) / 2; }
    &:dir(rtl) { margin-right: 8px - ($standard_padding - 16px) / 2; }
  }

  #gtk-combobox-popup-menu {
    padding: 2px 0;

    menuitem {
      min-height: $small_size - 2px * 2;
      padding: 0 8px;
    }

    // overflow arrows
    > arrow {
      &.top { margin-top: -2px; }

      &.bottom { margin-bottom: -2px * 3; }
    }
  }

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

  &:drop(active) { 
    box-shadow: none;

    // button.combo { @extend %button_basic:drop(active); }
  }
}

// This isn't an actual combobox, but it looks like one, so we should theme it
// the same way.

box.horizontal.linked > entry + button:not(.combo) {
  @include entry(normal)

  &:disabled { @include entry(disabled)}
}

// 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

.linked:not(.vertical) > combobox {
  > box > button.combo { @extend %linked_middle; }

  &:first-child > box > button.combo { @extend %linked_first_child; }

  &:last-child > box > button.combo { @extend %linked_last_child; }

  &:only-child > box > button.combo { @extend %linked_only_child; }
}

.linked.vertical > combobox {
  > box > button.combo { @extend %linked_vertical_middle; }

  &:first-child > box > button.combo { @extend %linked_vertical_first_child; }

  &:last-child > box > button.combo { @extend %linked_vertical_last_child; }

  &:only-child > box > button.combo { @extend %linked_vertical_only_child; }
}

%combo_flat {
  border-radius: 0;
  background-image: none;
  font-weight: inherit;

  @include entry(flat-normal);

  &:hover { box-shadow: inset 0 -2px $hint_fg_color; }

  &:checked {
    border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                  $accent_color 100%,
                                  transparent 0%)
                                  0 0 2 / 0 0 2px;
  }

  &:disabled { color: $disabled_fg_color; }
}

// Special Cases
toolbar {
  &:not(.inline-toolbar):not(.osd) {
    entry { margin: $small_space; }
    .linked entry {
      &:not(:first-child) { margin-left: 0; }
      &:not(:last-child) { margin-right: 0; }
    }
    spinbutton entry { margin: 0; }
  }
}

headerbar entry {
  margin-top: $normal_space;
  margin-bottom: $normal_space;
}

notebook {
  >  stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
    entry:not(.search) { @extend %entry_flat; }

    spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}

    spinbutton:not(.vertical) { @extend %entry_flat; }
  }
}

messagedialog entry { @extend %entry_flat; }

colorchooser .popover.osd spinbutton:not(.vertical) { @extend %entry_flat; }

popover.emoji-picker entry {
  border-bottom: 1px solid $border_color;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: none;
}

