window {
  &.csd {
    box-shadow: 0 0 14px 5px RGB(0 0 0 / 15%),
                0 0 5px 2px RGB(0 0 0 / 10%),
                0 0 0 1px RGB(0 0 0 / 5%);
    margin: 0px;
    border-radius: var(--window-radius);

    outline: 1px solid $window_outline_color;
    outline-offset: -1px;

    @media (prefers-contrast: more) {
      outline-color: $window_outline_color_hc;
      box-shadow: 0 0 14px 5px RGB(0 0 0 / 15%),
                  0 0 5px 2px RGB(0 0 0 / 10%),
                  0 0 0 1px RGB(0 0 0 / 80%);
    }

    &:backdrop {
      // the transparent shadow here is to enforce that the shadow extents don't
      // change when we go to backdrop, to prevent jumping windows.
      // The biggest shadow should be in the same order then in the active state
      // or the jumping will happen during the transition.
      box-shadow: 0 0 14px 5px transparent,
                  0 0 10px 5px RGB(0 0 0 / 8%),
                  0 0 0 1px RGB(0 0 0 / 5%);
      transition: box-shadow $backdrop_transition;

      @media (prefers-contrast: more) {
        box-shadow: 0 0 14px 5px transparent,
                    0 0 10px 5px RGB(0 0 0 / 8%),
                    0 0 0 1px RGB(0 0 0 / 80%);
      }
    }

    &.dialog.message,
    &.messagedialog {
      box-shadow: 0 0 14px 2px RGB(0 0 6 / 3%),
                  0 0 5px 2px RGB(0 0 6 / 10%),
                  0 0 0 1px RGB(0 0 0 / 5%);

      @media (prefers-contrast: more) {
        box-shadow: 0 0 14px 2px RGB(0 0 6 / 3%),
                    0 0 5px 2px RGB(0 0 6 / 10%),
                    0 0 0 1px RGB(0 0 0 / 80%);
      }
    }

    &.tiled,
    &.tiled-top,
    &.tiled-left,
    &.tiled-right,
    &.tiled-bottom {
      --window-radius: 0px;
      outline: none;

      box-shadow: 0 0 0 1px $border_color,
                  0 0 0 20px transparent; //transparent control workaround -- #3670

      &:backdrop {
        box-shadow: 0 0 0 1px $border_color,
                    0 0 0 20px transparent;
      }
    }

    &.maximized,
    &.fullscreen {
      --window-radius: 0px;
      outline: none;
      box-shadow: none;
      transition: none;
    }

    &.ssd-frame {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  &.solid-csd {
    margin: 0;
    padding: 5px;
    --window-radius: 0px;
    box-shadow: inset 0 0 0 5px $border_color,
                inset 0 0 0 4px var(--headerbar-bg-color),
                inset 0 0 0 1px $border_color;

    &:backdrop {
      box-shadow: inset 0 0 0 5px $border_color,
                  inset 0 0 0 4px var(--headerbar-backdrop-color),
                  inset 0 0 0 1px $border_color;
    }
  }

  // server-side decorations as used by mutter
  &.ssd {
    // just doing borders, wm draws actual shadows
    box-shadow: 0 0 0 1px RGB(0 0 0 / 5%);

    @media (prefers-contrast: more) {
      box-shadow: 0 0 0 1px RGB(0 0 0 / 80%);
    }
  }
}
