.top_header_user_im {
  text-decoration: none;
  color: var(--text_black);
  display: flex;
  gap: 3px;
  align-items: center;
  transition: var(--animation);

  svg {
    width: 22px;
    height: 21px;
    fill: var(--text_gray);
    position: relative;
    bottom: -1px;
  }

  span {

  }

  i {
    font-style: normal;
    color: var(--text_gray);
  }

  &:hover {
    svg {
      fill: var(--main_color);
    }

    i {
      color: var(--text_black);
    }

    span {
      color: var(--main_color);
    }
  }
}

.top_header_user_name {
  text-decoration: none;
  color: var(--text_black);
  display: flex;
  gap: 5px;
  align-items: center;
  transition: var(--animation);

  img {
    border-radius: 100%;
    width: 30px;
    height: 30px;
  }

  span {
  }

  &:hover {
    span {
      color:  var(--main_color);
    }
  }
}

.top_header_user_off {
  text-decoration: none;
  color: var(--text_black);
  display: flex;
  gap: 3px;
  align-items: center;
  transition: var(--animation);

  svg {
    width: 22px;
    height: 22px;
    fill: var(--text_gray);
  }

  &:hover {
    svg {
      fill: orangered;
    }
  }
}