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

.drop-down {
  box-shadow: var(--drop-shadow);
  background: var(--sys-color-cdt-base-container);
}

.preview-item {
  border-bottom: 1px solid var(--sys-color-divider);

  &:first-child {
    border-top: 1px solid var(--sys-color-divider);
  }

  padding: 6px 10px;
  position: relative;

  .metadata {
    margin-left: 3px;
  }

  /* done this way because if we have a border it
   * awkwardly merges in a diagonal with the top and
   * bottom border */
  &.selected::before {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background-color: var(--sys-color-primary);
  }
}

.preview-item canvas {
  width: 100%;
  height: 100%;
}

.text-details {
  flex-wrap: wrap;
  justify-content: space-between;
}

.text-details > span {
  padding-left: var(--sys-size-5);
  padding-right: var(--sys-size-5);
}

.text-details .name {
  font: var(--sys-typescale-body4-medium);
}

.text-details .metadata {
  color: var(--sys-color-token-subtle);
  font: var(--sys-typescale-body4-regular);
  text-align: right;
}

.screenshot-thumb {
  display: flex;
  border: 1px solid var(--sys-color-surface3);
  margin: 2px 4px;
}

.screenshot-thumb img {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

.landing-page-item {
  font: var(--sys-typescale-body4-regular);
  display: flex;
  align-items: center;
  gap: var(--sys-size-5);
}

.back-arrow:hover {
  background: var(--sys-color-state-hover-on-subtle);
}