front_end/ui/kit/cards/card.css

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

:host {
  display: flex;
  max-width: var(--sys-size-35);
  width: 100%;
}

:host([hidden]) {
  display: none;
}

#card {
  break-inside: avoid;
  min-width: var(--sys-size-31);
  margin: var(--sys-size-3) var(--sys-size-6) var(--sys-size-5) var(--sys-size-5);
  flex: 1;

  #heading {
    display: flex;
    white-space: nowrap;
    margin-bottom: var(--sys-size-5);

    [role="heading"] {
      color: var(--sys-color-on-surface);
      font: var(--sys-typescale-body2-medium);
    }

    [name="heading-prefix"]::slotted(*) {
      margin-right: var(--sys-size-3);
    }

    [name="heading-suffix"]::slotted(*) {
      margin-left: auto;
    }
  }

  #content {
    border-radius: var(--sys-shape-corner-small);
    box-shadow: var(--sys-elevation-level2);
    display: flex;
    flex-direction: column;
    background: var(--app-color-card-background);

    &::slotted(*) {
      padding: var(--sys-size-4) var(--sys-size-6);
    }

    &::slotted(*:not(:first-child)) {
      border-top: var(--sys-size-1) solid var(--app-color-card-divider);
    }
  }
}