/* When used as :class-card: surface */
.surface-card {
    --sd-color-card-text: var(--sy-c-light);
    --sd-color-card-border: transparent;
    --sd-color-card-background: var(--sy-c-header-background);

    /* optional matching surface look */
    border-radius: 0.75rem;
}

.sd-card {
    border-radius: 0.75rem;
}

/* dropdown component improvements */

details.sd-dropdown.sd-card {
  border-radius: 0.75rem;
  border: 1px solid #f2d9b5;
  overflow: hidden;
}

details.sd-dropdown.sd-card > summary.sd-summary-title {
  background-color: #fff4e5;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: none;
}

details.sd-dropdown.sd-card > summary.sd-summary-title:hover {
  background-color: #fff4e5;
}

details.sd-dropdown.sd-card[open] > summary.sd-summary-title {
  border-radius: 0.75rem 0.75rem 0 0;
}

details.sd-dropdown.sd-card > .sd-summary-content {
  background-color: #ffffff;
  padding: 1rem;
  border-radius: 0 0 0.75rem 0.75rem;
}

details.sd-dropdown.sd-card > .sd-summary-content p {
  margin-top: 0;
}
}

.lb-close {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;

  width: 40px !important;
  height: 40px !important;

  z-index: 9999 !important;
}


html.dark details.sd-dropdown.sd-card {
  overflow: hidden;
}

html.dark details.sd-dropdown.sd-card:not([open]) {
  box-shadow: none;
  outline: none;
}

html.dark details.sd-dropdown.sd-card > summary.sd-summary-title {
  background-color: var(--sy-c-surface, #273449);
  padding: 0.75rem 1rem;
  cursor: pointer;
}

html.dark details.sd-dropdown.sd-card > summary.sd-summary-title:hover {
  background-color: var(--sy-c-surface, #273449);
}

html.dark details.sd-dropdown.sd-card > .sd-summary-content {
  background-color: #1e293c;
  padding: 1rem;
}

html.dark details.sd-dropdown.sd-card,
html.dark details.sd-dropdown.sd-card .sd-card-text,
html.dark details.sd-dropdown.sd-card .sd-summary-text {
  color: rgba(255, 255, 255, 0.92);
}

details.sd-dropdown.sd-card[open] {
  border: 1px solid var(--sd-color-card-border);
}