/* hover */

@media screen and (any-hover: hover) {
  .header__burger:hover .header__burger-line,
  .header__burger:hover::before,
  .header__burger:hover::after {
    background-color: var(--color-btn-link);
  }

  .header__cross:hover::before,
  .header__cross:hover::after {
    background-color: var(--color-btn-link);
  }

  .header__nav-link:hover,
  .contacts__link:hover {
    color: var(--color-btn-link);
    text-decoration-color: currentColor;
  }

  .contacts__link:hover svg {
    color: var(--color-btn-link);
  }

  .main__link:hover {
    color: var(--color-btn-link);
    background-color: var(--color-gray);
    border-color: var(--color-btn-link);
  }

  .catalog__link:hover::after {
    opacity: 1;
  }
}

/* active */

.header__burger:active .header__burger-line,
.header__burger:active::before,
.header__burger:active::after {
  background-color: var(--color-btn-link);
}

.header__cross:active::before,
.header__cross:active::after {
  background-color: var(--color-btn-link);
}

.header__nav-link:active,
.contacts__link:active {
  color: var(--color-main);
}

.main__link:active {
  color: var(--color-gray);
  background-color: var(--color-btn-link);
  border-color: var(--color-border);
}

.catalog__link:active::before {
  background-color: var(--color-gray-50);
}

.catalog__link:active::after {
  opacity: 1;
}

.contacts__link:active .contacts__link-wrap svg {
  color: var(--color-main);
}

/* focus */

*:focus {
  outline: none;
}

.focus-state.focus-visible::before {
  opacity: 1;
}

.header__burger.focus-visible .header__burger-line,
.header__burger.focus-visible::before,
.header__burger.focus-visible::after {
  background-color: var(--color-btn-link);
}

.header__cross.focus-visible::before,
.header__cross.focus-visible::after {
  background-color: var(--color-btn-link);
}

.main__link.focus-visible {
  color: var(--color-btn-link);
  background-color: var(--color-main);
  border-color: var(--color-text);
}

.catalog__link.focus-visible::before {
  background-color: var(--color-main-50);
  border-color: var(--color-text);
}

.catalog__link.focus-visible::after {
  opacity: 0;
}

.contacts__link.focus-visible .contacts__link-wrap svg {
  color: var(--color-btn-link);
}