.view,
%view {
  color: $text_color;
  background-color: $base_color;

  &:disabled {
    color: gtkalpha(currentColor, .5);
    background-color: gtkmix($bg_color, $base_color, 60%);
  }

  &:selected {
    &:focus, & {
      background-color: $view_selected_color;

      border-radius: 3px;
    }
  }
}

textview {
  caret-color: currentColor;

  > text {
    @extend %view;
  }

  > border {
    background-color: mix($bg_color, $base_color, 50%);
  }

  &:drop(active) {
    caret-color: $drop_target_color;
  }
}

iconview {
  @extend %view;

  @include focus-ring();

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

  > dndtarget:drop(active) {
    border-style: solid;
    border-width: 1px;
    border-color: $drop_target_color;
  }
}

rubberband {
  border: 1px solid $accent_bg_color;
  background-color: gtkalpha($accent_bg_color, 0.2);
}

flowbox {
  > flowboxchild {
    padding: 3px;
    transition: $focus_transition;

    @include focus-ring();

    &:selected {
      background-color: $view_selected_color;
    }
  }
}

gridview {
  > child {
    padding: 3px;
    transition: $focus_transition;

    @include focus-ring();

    &:selected {
      background-color: $view_selected_color;
    }

    box { //cells
      border-spacing: 8px; //label separation
      margin: 12px;
    }
  }
}
