.preferences {
  padding: calc(var(--spacer) / 6) calc(var(--spacer) / 3);
  cursor: pointer;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  margin-left: calc(var(--spacer) / 3);
  background-color: var(--background-content);
  white-space: nowrap;
}

.preferences svg {
  display: inline-block;
  vertical-align: middle;
}

.preferences[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

.caret,
svg.caret {
  width: var(--font-size-small);
  height: var(--font-size-small);
  fill: var(--border-color);
  margin-left: calc(var(--spacer) / 4);
  transition: transform 0.2s ease-out;
  display: none;
}

@media screen and (min-width: 42rem) {
  .caret,
  svg.caret {
    display: inline-block;
  }
}

.icon {
  fill: var(--brand-grey-light);
  transition: 0.2s ease-out;
  width: 1em;
  height: 1em;
}

.preferences:hover .icon,
.preferences:focus .icon,
.preferences:active .icon,
.preferences[aria-expanded='true'] .icon {
  fill: var(--font-color-text);
}

.preferencesDetails {
  padding: calc(var(--spacer) / 4) calc(var(--spacer) / 2);
  max-width: 20rem;
}

.preferencesDetails > li > div,
.preferencesDetails p:last-child {
  margin-bottom: 0;
}

.preferencesDetails li p {
  margin-top: calc(var(--spacer) / 8);
}

.preferencesDetails > li {
  padding-top: calc(var(--spacer) / 3);
  padding-bottom: calc(var(--spacer) / 3);
}

.preferencesDetails li:last-child,
.preferencesDetails li:last-child p {
  border-bottom: none;
  margin-bottom: 0;
}
