/*
 * Copyright 2021 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

.css-length {
  display: inline-block;
  position: relative;
  outline: none;
}

.value {
  cursor: ew-resize;
}

.unit-dropdown {
  display: none;
}

.unit-dropdown select {
  all: unset;
  cursor: pointer;
  opacity: 0%;
  width: 0.8em;
}

.icon {
  position: absolute;
  display: inline-block;
  -webkit-mask-image: var(--image-file-chevrons);
  -webkit-mask-position: -12px 4px;
  -webkit-mask-size: 19px 6px;
  -webkit-mask-repeat: no-repeat;
  background-color: var(--color-text-primary);
  content: "";
  height: 1em;
  width: 1em;
}

:host(:not(:last-child)) {
  margin-right: 0.1em;
}

:host(:not(:last-child)) .unit-dropdown {
  position: absolute;
}

.css-length:hover .unit-dropdown {
  display: inline-block;
}

:host(:last-child) .unit-dropdown select {
  width: 0.6em;
}

/*
 * Copyright 2021 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

.css-length {
  display: inline-block;
  position: relative;
  outline: none;
}

.value {
  cursor: ew-resize;
}

.unit-dropdown {
  display: none;
}

.unit-dropdown select {
  all: unset;
  cursor: pointer;
  opacity: 0%;
  width: 0.8em;
  background-color: var(--color-background);
}

.icon {
  position: absolute;
  display: inline-block;
  -webkit-mask-image: var(--image-file-chevrons);
  -webkit-mask-position: -12px 4px;
  -webkit-mask-size: 19px 6px;
  -webkit-mask-repeat: no-repeat;
  background-color: var(--color-text-primary);
  content: "";
  height: 1em;
  width: 1em;
}

:host(:not(:last-child)) {
  margin-right: 0.1em;
}

:host(:not(:last-child)) .unit-dropdown {
  position: absolute;
}

.css-length:hover .unit-dropdown {
  display: inline-block;
}

:host(:last-child) .unit-dropdown select {
  width: 0.6em;
}

Add background for <length> comp dropdown
Add background for <length> comp dropdown

This CL adds background color to apply correct contrast in dark mode.

Fixed: 1264017
Change-Id: I1d919590718423b25a8e9cfa263558073d3908cd
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3417153
Auto-Submit: Changhao Han <68542faf32f0a558a873c0f094ca9bedb2744bff@chromium.org>
Reviewed-by: Alex Rudenko <d8d88e7d7e77f69e23d1d1432231196fb8e02a62@chromium.org>
Commit-Queue: Alex Rudenko <d8d88e7d7e77f69e23d1d1432231196fb8e02a62@chromium.org>
