:root {
  --white: #ffffff;
  --white-opacity: #f5f5f580;
  --black: #111111;
  --black-opacity: #11111180;
  --black-opacity-30: #11111130;
  --gray: #e1e1e6;
  --dark-gray: #808080;
  --almost-black: #000105;
  --color: 128, 128, 128;
  --blue: #007fff;
  --yellow: #fffe00;
  --violet: #9c75ff;
  --green: #3cb371;
  --coral: #ff7f50;
  --light-violet: #ebecff;
  --light-grey: #d3d3d3;
  --gap: calc(6px + 0.2vw);
  --gap-md: 32px;
  --gap-sm: 16px;
  --gap-xs: 8px;
}

:root {
  --white: #ffffff;
  --white-opacity: #f5f5f580;
  --black: #111111;
  --black-opacity: #11111180;
  --black-opacity-30: #11111130;
  --gray: #e1e1e6;
  --dark-gray: #808080;
  --almost-black: #000105;
  --color: 128, 128, 128;
  --blue: #007fff;
  --yellow: #fffe00;
  --violet: #9c75ff;
  --green: #3cb371;
  --coral: #ff7f50;
  --light-violet: #ebecff;
  --light-grey: #d3d3d3;
  --gap: calc(6px + 0.2vw);
  --gap-md: 32px;
  --gap-sm: 16px;
  --gap-xs: 8px;
}

[data-type=controls] > * {
  align-items: center;
  display: flex;
  justify-content: center;
  transition: transform 0.2s ease;
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}
[data-type=controls] > .more, [data-type=controls] > .link, [data-type=controls] > .anchor {
  height: 20px;
  width: 20px;
}
[data-type=controls] > .more:hover, [data-type=controls] > .link:hover, [data-type=controls] > .anchor:hover {
  cursor: pointer;
}
[data-type=controls] > .more:hover {
  cursor: pointer;
}
[data-type=controls] > .link {
  background-color: var(--gray);
  border: 1px solid var(--black);
}
[data-type=controls] > .link:hover:hover {
  color: var(--black);
  opacity: 0.5;
}
[data-type=controls] > .link > .anchor {
  background-color: #2b2b2b;
}