@use "../variables" as *;
@use "../utils" as *;

.mie.view {
  // prettier-ignore
  background-image:
    linear-gradient(
        mvar("view.overlay"),
        mvar("view.overlay")
    ),
    linear-gradient(
        mvar("view.bg"),
        mvar("view.bg")
    );

  background-color: mvar("view.bg");

  // Background appearance
  &.panel {
    --mie-view-bg: #{mvar("view.panel")} !important;
  }

  &.windows {
    --mie-view-bg: #{mvar("view.window")} !important;
  }

  &.content {
    --mie-view-bg: #{mvar("view.content")} !important;
  }

  &.osd {
    --mie-view-bg: #{mvar("view.osd")} !important;
  }

  &.bordered {
    border: 0.1rem solid mvar("view.border-bg") !important;
  }

  &.fluid {
    width: 100%;
  }

  &.scrollable {
    overflow: auto;
  }
}
