.acc {
  --acc-divider: inset 0 -1px 0 0 var(--color-gray-50);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  box-shadow: var(--acc-divider);
  font-family: var(--font-family-base);
  font-optical-sizing: none;
}

.acc__header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-20);
  width: 100%;
  padding: var(--spacing-20) 0;
  box-sizing: border-box;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.acc__title {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  color: var(--color-gray-900);
  overflow-wrap: break-word;
}

.acc__header:hover .acc__title,
.acc__header:focus-visible .acc__title,
.acc--hover .acc__title { color: var(--color-gray-500); }

.acc__header:focus-visible {
  outline: 2px solid var(--color-accent-400);
  outline-offset: 2px;
}

.acc__icon {
  display: inline-flex;
  flex: none;
  width: var(--spacing-20);
  height: var(--spacing-20);
  color: var(--color-gray-900);
}
.acc__icon svg { display: block; width: 100%; height: 100%; }

.acc__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-32);
  width: 100%;
  box-sizing: border-box;
  padding-bottom: var(--spacing-36);
}

.acc__text {
  margin: 0;
  width: 100%;
  color: var(--color-gray-700);
  overflow-wrap: break-word;
}

.acc--closed .acc__content { display: none; }

.acc--accent { padding-left: var(--spacing-32); }
.acc--accent .acc__content { padding-right: var(--spacing-32); }

.acc--accent.acc--open {
  background: var(--color-gray-0);
  box-shadow: inset var(--spacing-4) 0 0 0 var(--color-accent-400), var(--acc-divider);
}

.acc--accent.acc--open .acc__icon { display: none; }