.accent-color-row color {
  min-width: 16px;
  min-height: 16px;
  border-radius: 16px;
}

.accent-color-row color:disabled {
  opacity: var(--disabled-opacity);
}

adaptive-preview {
  headerbar.adaptive-mode-flat {
    @extend .flat;
  }

  .device-view {
    background: #101013;
    color: white;
    box-shadow: 0 0 0 2px RGB(255 255 255 / 15%);
    margin: 2px;
    padding: var(--top-bezel) var(--side-bezel) var(--bottom-bezel);
    border-radius: var(--top-device-corner-radius)
                   var(--top-device-corner-radius)
                   var(--bottom-device-corner-radius)
                   var(--bottom-device-corner-radius);

    --window-radius: 0px;

    /* Hack to make GtkGraphicsOffload disable offload in this case */
    opacity: 99.9999999999999%;

    &.custom {
      padding: 0;
      border-radius: 0;
      margin: 0;
      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%);
      }
    }

    &.highlight {
      background: oklab(from var(--accent-bg-color) 0.5 a b);
      box-shadow: none;

      .screen-view .shell-top-bar,
      .screen-view .shell-bottom-bar {
        background: none;
      }

      &.custom {
        box-shadow: 0 0 14px 2px RGB(0 0 6 / 3%),
                    0 0 5px 2px RGB(0 0 6 / 10%),
                    0 0 0 3px oklab(from var(--accent-bg-color) 0.5 a b);
      }
    }

    .screen-view {
      border-radius: var(--top-screen-corner-radius)
                     var(--top-screen-corner-radius)
                     var(--bottom-screen-corner-radius)
                     var(--bottom-screen-corner-radius);

      &.outline {
        filter: drop-shadow( 3px 0 0 var(--accent-bg-color))
                drop-shadow(-3px 0 0 var(--accent-bg-color))
                drop-shadow(0  3px 0 var(--accent-bg-color))
                drop-shadow(0 -3px 0 var(--accent-bg-color));
      }

      .shell-top-bar, .shell-bottom-bar {
        background: black;
      }
    }
  }
}
