.button.ThemeButtonCircle {
  position: relative;
  text-decoration: none;
  border: none;
  background-color: transparent;
  transition: var(--speedFF) background-color ease;
  min-height: var(--sizeL);
  min-width: var(--sizeL);
  height: var(--sizeL);
  border-radius: 1000px;
  width: fit-content;
}
.button.ThemeButtonCircle:hover {
  background-color: var(--colorShadowLight);
}
.button.ThemeButtonCircle > a, .button.ThemeButtonCircle > .clickableArea {
  color: inherit;
  min-height: inherit;
  min-width: inherit;
  width: fit-content;
  position: relative;
  padding: 0;
  box-sizing: border-box;
  display: inline-flex;
  user-select: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  outline: none !important;
  width: 100%;
}
.button.ThemeButtonCircle > a > .buttonMedia, .button.ThemeButtonCircle > .clickableArea > .buttonMedia {
  font-size: var(--fontNestedM);
  border-radius: inherit;
  min-width: inherit;
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button.ThemeButtonCircle > a > .buttonText, .button.ThemeButtonCircle > .clickableArea > .buttonText {
  margin-left: var(--sizeM);
  margin-right: var(--sizeM);
}
.button.ThemeButtonCircle[data-active] {
  background-color: var(--colorPrimary);
  color: var(--colorTextAlt);
}