/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */

:host {
  /**
   * Use 1px instead of 0.5px because the virtual list relies on accurate layout
   * measurements to pre-compute item positions. Sub-pixel borders (e.g. 0.5px)
   * are rendered differently across devices due to DPR rounding, which leads to
   * inconsistent height calculations and causes incorrect virtualization offsets.
   */
  --sidebar-box-border-width: 1px;

  display: flex;
  flex-direction: column;
  background-color: var(--sidebar-box-background);
  box-shadow: none;
  color: var(--sidebar-box-color);
  border: var(--sidebar-box-border);
  border-radius: var(--border-radius-medium);
  border-width: var(--sidebar-box-border-width);
  border-color: var(--sidebar-box-border-color);
}

.line-item:focus-visible,
.edit-line-container:focus-visible {
  z-index: 1;
}

.edit-line-container {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: end;

  > .edit-button {
    margin: var(--space-medium);
  }
}

moz-message-bar {
  border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
  border-width: var(--sidebar-box-border-width);
  height: 50px;
  position: relative;

  > moz-button {
    position: absolute;
    inset-inline-end: var(--space-medium);
    inset-block: 0;
    margin: auto 0;
  }

  @media (prefers-contrast) {
    border-inline: none;
    border-block-end: none;
  }
}
