.header {
  display: flex;
  height: 5vh;
  background-color: var(--background-color);
}

.header__icon {
  position: relative;
  width: 30px;
  height: 30px;
  transition: 0.15s;
}
.header__icon svg {
  width: 100%;
  height: 100%;
}

.header__icon__discord {
  --social-color: var(--discord-color);
}

.header__toggle__icons svg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.header__toggle__icons svg:nth-of-type(1) {
  opacity: 1;
}
.header__toggle__icons svg:nth-of-type(2) {
  opacity: 0;
}

.header__toggled svg:nth-of-type(1) {
  opacity: 0;
}
.header__toggled svg:nth-of-type(2) {
  opacity: 1;
}

.header__title {
  color: var(--primary-color-text);
  margin-left: 5px;
  margin-top: 3px;
  font-size: var(--font-size-medium);
}

.header__controls__group {
  margin-left: auto;
  display: flex;
  --color: var(--primary-color-text);
  --color-hover: var(--primary-color-light);
  --bg-color-hover: var(--primary-color-dark);
}

.header__control {
  color: var(--color);
  background-color: transparent;
}
.header__control:hover,
.header__control:active {
  color: var(--color-hover);
  background-color: var(--bg-color-hover);
}
.header__control__close {
  --color-hover: var(--secondary-color-light);
  --bg-color-hover: var(--secondary-color-dark);
}
