.details-field {
  text-transform: uppercase;
  border: 0;
}

@media all and (min-width: 768px) {
  .details-field {
    font-size: var(--font-size-12);
  }
}

.details-field--color-reversed {
  color: var(--color-1);
}

@media all and (min-width: 768px) {
  .details-field--absolute {
    position: relative;
  }
}

.details-field--second {
  text-transform: none;
}

.details-field__summary {
  display: inline-block;
  padding: 0;
  list-style: none;
  cursor: pointer;
  vertical-align: top;
}

.details-field__summary::marker,
.details-field__summary::-webkit-details-marker {
  display: none;
}

.details-field--second .details-field__summary {
  width: 100%;
}

@media all and (min-width: 768px) {
  .details-field--second .details-field__summary {
    width: auto;
  }
}

.details-field__summary-title {
  display: flex;
  align-items: center;
}

.details-field--second .details-field__summary-title {
  justify-content: space-between;
}

.details-field__icon {
  width: 0.625rem;
  height: 0.625rem;
  margin-left: 0.5rem;
  vertical-align: top;
  pointer-events: none;
  fill: currentColor;
}

[open] .details-field__icon {
  transform: rotate(180deg);
}

.details-field__icon-second {
  display: none;
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: 0.5rem;
  pointer-events: none;
  fill: currentColor;
}

.details-field:not([open]) .details-field__icon-second--plus,
.details-field[open] .details-field__icon-second--minus {
  display: inline-block;
}

@media all and (min-width: 768px) {
  .details-field:not([open]) .details-field__icon-second--plus,
  .details-field[open] .details-field__icon-second--minus {
    display: none;
  }
}

.details-field__content {
  margin-top: var(--space-10);
}

.details-field__content > *:first-child {
  margin-top: 0;
}

.details-field__content > *:last-child {
  margin-bottom: 0;
}

@media all and (min-width: 768px) {
  .details-field--absolute .details-field__content {
    position: absolute;
    top: 100%;
    left: 0;
  }
}