:host {
  display: block;
  font-family: var(--sc-font-sans);
  --sc-toggle-padding: var(--sc-spacing-medium);
}

.details {
  border-radius: var(--sc-border-radius-medium);
  background-color: var(--sc-color-white);
  overflow-anchor: none;
}
.details__radio {
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.75em;
  background-color: var(--sc-input-background-color);
  color: transparent;
  border-radius: 50%;
  border: solid var(--sc-input-border-width) var(--sc-input-border-color);
  background-color: var(--sc-input-background-color);
  display: inline-flex;
  color: transparent;
  width: var(--sc-radio-size);
  height: var(--sc-radio-size);
  transition: var(--sc-transition-fast) border-color, var(--sc-transition-fast) background-color, var(--sc-transition-fast) color, var(--sc-transition-fast) box-shadow;
}
.details__radio svg {
  width: 100%;
  height: 100%;
}

.details--open .details__radio {
  color: var(--sc-color-white);
  border-color: var(--sc-color-primary-500);
  background-color: var(--sc-color-primary-500);
}

.details:not(.details--borderless) {
  border: solid 1px var(--sc-color-gray-200);
}

.details--disabled {
  opacity: 0.5;
}

.details__header {
  display: flex;
  align-items: center;
  border-radius: inherit;
  padding: var(--sc-toggle-padding);
  user-select: none;
  cursor: pointer;
}

.details__header:focus {
  outline: none;
}

.details__header:focus-visible {
  box-shadow: var(--sc-focus-ring);
}

.details--disabled .details__header {
  cursor: not-allowed;
}

.details--disabled .details__header:focus-visible {
  outline: none;
  box-shadow: none;
}

.details__summary {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}

.details__summary-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  transition: var(--sc-transition-medium) transform ease;
}

.details--open .details__summary-icon {
  transform: rotate(90deg);
}

.details__body {
  overflow: hidden;
  border-top: solid var(--sc-input-border-width) var(--sc-input-border-color);
}

.details--shady .details__body {
  background: var(--sc-color-gray-50);
}

.details__content {
  padding: var(--sc-toggle-padding);
}