/* Override Joinchat button styles */
.joinchat__button--icon {
  background: var(--color);
}

.joinchat__button--icon:hover {
  background: var(--hover);
}

.joinchat__button--icon .joinchat__button__open {
  display: flex;
  color: var(--text, #fff) !important;
  background-image: none;
  border-radius: 50%;
  overflow: hidden;
}

.joinchat--chatbox .joinchat__button--icon .joinchat__button__open {
  display: none;
}

.joinchat__button__open svg,
.joinchat__button__open img {
  width: 60%;
  height: 60%;
  margin: auto;
}

/* Channels */

.joinchat__channels {
  position: sticky;
  bottom: 8px;
  display: flex;
  flex-direction: row-reverse;
  width: var(--s);
  height: var(--s);
  padding: 0 8px;
  margin: 8px 0 8px auto;
  transition: width 0s linear 0.5s;
}

.joinchat--left .joinchat__channels {
  flex-direction: row;
  margin: 8px auto 8px 0;
}

.joinchat--chatbox .joinchat__channels {
  width: 100%;
  transition: width 0.3s ease-out 0.2s;
}

/* Opt-in required */
.joinchat--chatbox.joinchat--optout .joinchat__channels {
  filter: grayscale(1);
  pointer-events: none;
}

.joinchat__channel {
  flex: 0 1 calc(var(--s)*0.85);
  min-width: 0;
  max-width: calc(var(--s)*0.85);
}

.joinchat--left .joinchat__channel {
  direction: rtl;
}

.joinchat__channel:first-child {
  flex: 0 0 var(--s);
  max-width: var(--s);
}

.joinchat__channel:nth-child(n+2) {
  opacity: 0.2;
}

.joinchat__channel:hover {
  flex-shrink: 0;
}

.joinchat--chatbox .joinchat__channel {
  opacity: 1;
  transition: opacity 0.3s linear 0.2s, flex-shrink 0.2s linear;
}

/* Toggle iOS icons */

.joinchat__channels {
  --ios: none;
  --non-ios: block;
}

@supports (-webkit-overflow-scrolling: touch) {
  .joinchat__channels {
    --ios: block;
    --non-ios: none;
  }
}

/* RTL */

[dir=rtl] .joinchat--right .joinchat__channels {
  flex-direction: row;
}

[dir=rtl] .joinchat--right .joinchat__channel {
  direction: ltr;
}

[dir=rtl] .joinchat--left .joinchat__channels {
  flex-direction: row-reverse;
  margin: 8px auto 8px 0;
}

.joinchat__channel div {
  width: var(--s);
  height: var(--s);
  border: 2px solid #fff;
  border-radius: 50%;
  background: #ccc;
  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, .24);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.1s ease-in-out;
  /* fix Safari hover */
  transform: translateX(0);
}

.joinchat__channel div:hover,
.joinchat__channel div:focus {
  box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, .6);
}

.joinchat__channel svg,
.joinchat__channel img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.1s ease-in-out;
}

.joinchat__channel div:hover svg,
.joinchat__channel div:focus svg,
.joinchat__channel div:hover img,
.joinchat__channel div:focus img {
  transform: scale3d(1.1, 1.1, 1.1);
}

.joinchat__channel--qr div {
  cursor: default;
}

/* Reverse z-index */
.joinchat__channel:nth-child(1) { z-index: 14; }
.joinchat__channel:nth-child(2) { z-index: 13; }
.joinchat__channel:nth-child(3) { z-index: 12; }
.joinchat__channel:nth-child(4) { z-index: 11; }
.joinchat__channel:nth-child(5) { z-index: 10; }
.joinchat__channel:nth-child(6) { z-index: 9; }
.joinchat__channel:nth-child(7) { z-index: 8; }
.joinchat__channel:nth-child(8) { z-index: 7; }
.joinchat__channel:nth-child(9) { z-index: 6; }
.joinchat__channel:nth-child(10) { z-index: 5; }
.joinchat__channel:nth-child(11) { z-index: 4; }
.joinchat__channel:nth-child(12) { z-index: 3; }
.joinchat__channel:nth-child(13) { z-index: 2; }
.joinchat__channel:nth-child(14) { z-index: 1; }

/* Only channels without CTA */
.joinchat--channels .joinchat__header {
  height: 0;
  min-height: 0;
  background: none;
}

.joinchat--channels .joinchat__copy,
.joinchat--channels .joinchat__powered,
.joinchat--channels .joinchat__wa,
.joinchat--channels .joinchat__header__text {
  display: none;
}

.joinchat--channels .joinchat__close {
  top: -4px;
  right: -5px;
  margin-top: 0;
}

.joinchat--channels.joinchat--left .joinchat__close {
  right: auto;
  left: -5px
}

.joinchat--channels .joinchat__box {
  min-height: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

@media (max-width: 480px),
(orientation: landscape) and (max-width: 767px) {
  .joinchat--channels .joinchat__close {
    top: 14px;
    right: -2px;
  }

  .joinchat--channels.joinchat--left .joinchat__close {
    right: auto;
    left: -2px
  }
}