.view,
%view {
  color: var(--view-fg-color);
  background-color: var(--view-bg-color);

  &:disabled {
    color: color-mix(in srgb, var(--view-fg-color) var(--disabled-opacity), transparent);
    background-color: color-mix(in srgb, var(--window-bg-color) 60%, var(--view-bg-color));
  }

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

      border-radius: $button_radius;
    }
  }
}

textview {
  caret-color: currentColor;

  > text {
    @extend %view;

    &, &:disabled {
      background-color: transparent;
    }
  }

  &.inline {
    &, &:disabled, > text {
      background-color: transparent;
      color: inherit;
    }
  }

  > border {
    background-color: color-mix(in srgb, var(--window-bg-color), var(--view-bg-color) 50%);
  }

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

rubberband {
  border: 1px solid var(--accent-color);
  background-color: color-mix(in srgb, var(--accent-color) 20%, transparent);
}

flowbox > flowboxchild,
gridview > child {
  padding: 3px;
  border-radius: $button_radius;

  @include focus-ring();

  &:selected {
    background-color: $view_selected_color;

    @media (prefers-contrast: more) {
      box-shadow: inset 0 0 0 1px $border_color;
    }
  }
}

flowbox > flowboxchild,
gridview > child.activatable {
  &:hover { background-color: $view_hover_color; }

  &:active { background-color: $view_active_color; }

  &:selected {
    &:hover { background-color: $view_selected_hover_color; }

    &:active { background-color: $view_selected_active_color; }
  }

  @media (prefers-contrast: more) {
    &:hover, &:active {
      box-shadow: inset 0 0 0 1px $border_color;
    }
  }
}

flowbox, gridview {
  &.view:disabled {
    color: var(--view-fg-color);
  }
}
