/*------------------------------------*\
//     #CHAT LINK
// \*------------------------------------*/

.c-chat,
a.c-chat {
  /* @extend .c-btn; */
  border-radius: var(--border-radius-top);
  color: var(--color-neutral-white);
  display: inline-block;
  font-size: 1rem;
  letter-spacing: 2px;
  padding: 12px 16px 23px;
  text-decoration: none;
  text-transform: uppercase;
  transform: rotate(-90deg) translateY(-22px);
  transform-origin: right;
  transition: all var(--anim-fade-quick) var(--anim-ease);
  z-index: 1;

  @media all and (min-width: 47em) {
    padding: 16px 24px 18px;
  }

  &:hover,
  &:focus {
    background-position: 100% 0;
    box-shadow: 3px 0 5px rgba(var(--color-neutral-black), .2);
    color: var(--color-neutral-white);
    transform: rotate(-90deg) translateY(-28px);
    transition: all .4s ease-in-out;
  }

  &:visited {
    color: var(--color-neutral-white);
  }
}

.c-chat__text {
  display: none;

  @media all and (min-width: 47em) {
    display: inline-block;
  }
}

.c-chat__icon {
  margin: 0;
  transform: rotate(90deg) scale(1);
  vertical-align: middle;
  width: 22px;

  @media all and (min-width: 47em) {
    height: 22px;
    margin-left: 6px;
    width: 28px;
  }
}