import { css } from 'lit';
export default css `
:host {
  display: block;
  height: 56px;
  outline: none;
  cursor: default;
}

:host([lines=two]),
:host([lines=one][image="image"]) {
  height: 72px;
}

:host([lines=three]),
:host([lines=one][image="video"]) {
  height: 88px;
}

.surface {
  height: inherit;
  position: relative;

  display: flex;
  align-items: center;
}

.surface,
.content {
  width: 100%;
}

.container {
  position: absolute;
  inset: 0;
  z-index: 1;

  /* background-color: var(--md-sys-color-surface); */
}

.content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 8px 16px 8px 16px;
}

.ripple {
  z-index: 3;
}

:host([image=video]) .content {
  /* The spec says the right padding is 24px but counting from the checkbox check border.
      This does not include spacing presented by the checkbox itself (18 box, 40px state layer)
   */
  padding: 12px 16px 12px 0px;
}

.headline {
  color: var(--md-sys-color-on-surface);

  font-family: var(--md-sys-typescale-body-large-font-family-name);
  font-style: var(--md-sys-typescale-body-large-font-family-style);
  font-weight: var(--md-sys-typescale-body-large-font-weight, 400);
  font-size: var(--md-sys-typescale-body-large-font-size, 16px);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  line-height: var(--md-sys-typescale-body-large-height);
  text-transform: var(--md-sys-typescale-body-large-text-transform);
  text-decoration: var(--md-sys-typescale-body-large-text-decoration);

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  display: flex;
  align-items: center;
}

.supporting-text {
  color: var(--md-sys-color-on-surface-variant);

  font-family: var(--md-sys-typescale-body-medium-font-family-name);
  font-style: var(--md-sys-typescale-body-medium-font-family-style);
  font-weight: var(--md-sys-typescale-body-medium-font-weight, 400);
  font-size: var(--md-sys-typescale-body-medium-font-size, 16px);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  line-height: var(--md-sys-typescale-body-medium-height);
  text-transform: var(--md-sys-typescale-body-medium-text-transform);
  text-decoration: var(--md-sys-typescale-body-medium-text-decoration);

  overflow: hidden;
}

.supporting-text ::slotted(*),
slot[name=end-text]::slotted(*) {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

slot[name=end-text]::slotted(*) {
  /* this is to make up to the 24px right padding defined in the spec. */
  margin-right: 8px;
  margin-left: 16px;
}

:host([lines=three]) .supporting-text {
  height: calc(2em * var(--md-sys-typescale-body-medium-height, 1.1));
}

:host([lines=two]) .supporting-text ::slotted(*) {
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trailing-supporting-text {
  color: var(--md-sys-color-on-surface-variant);

  font-family: var(--md-sys-typescale-body-small-font-family-name);
  font-style: var(--md-sys-typescale-body-small-font-family-style);
  font-weight: var(--md-sys-typescale-body-small-font-weight, 400);
  font-size: var(--md-sys-typescale-body-small-font-size, 16px);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  line-height: var(--md-sys-typescale-body-small-height);
  text-transform: var(--md-sys-typescale-body-small-text-transform);
  text-decoration: var(--md-sys-typescale-body-small-text-decoration);
}

:host slot[name=end]::slotted(*) {
  color: var(--md-sys-color-on-surface-variant);
  fill: var(--md-sys-color-on-surface-variant);
  margin-left: 16px;
}

:host slot[name=start]::slotted(*) {
  display: block;
  margin-right: 16px;
}

:host([image=icon]) slot[name=start]::slotted(*) {
  width: 24px;
  height: 24px;
}

:host([image=avatar]) slot[name=start]::slotted(*) {
  width: 40px;
  height: 40px;
}

:host([image=image]) slot[name=start]::slotted(*) {
  width: 56px;
  height: 56px;
}

:host([image=video]) slot[name=start]::slotted(*) {
  width: 114px;
  height: 64px;
}

.body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

:host(.highlight) .state {
  background-color: var(--md-sys-color-on-surface);
  opacity: var(--md-sys-state-hover-state-layer-opacity);
  position: absolute;
  inset: 0;
  z-index: 1;
}

:host(.select) .state {
  background-color: var(--md-sys-color-on-surface);
  opacity: var(--md-sys-state-focus-state-layer-opacity);
  position: absolute;
  inset: 0;
  z-index: 1;
}
`;
//# sourceMappingURL=ListItem.styles.js.map