:root {
  --ct-color-bg: #1D202B;
  --ct-color-font: #CDD1E0;
}

.ct {
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  opacity: 0;
  user-select: none;
  pointer-events: none;
  transition: opacity 50ms ease-in, transform 70ms cubic-bezier(0.215, 0.61, 0.355, 1);
  will-change: opacity, top, left;

  box-shadow: 0 8px 12px 0 rgba(29,32,43,0.17), 0 4px 5px -3px rgba(5,6,12,0.49);
  border-radius: 9px;

  &::before {
    content: '';
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    background-color: var(--ct-color-bg);
    z-index: -1;
    border-radius: 4px;

    @supports(-webkit-mask-box-image: url('')){
      border-radius: 0;
      -webkit-mask-box-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M10.71 0h2.58c3.02 0 4.64.42 6.1 1.2a8.18 8.18 0 013.4 3.4C23.6 6.07 24 7.7 24 10.71v2.58c0 3.02-.42 4.64-1.2 6.1a8.18 8.18 0 01-3.4 3.4c-1.47.8-3.1 1.21-6.11 1.21H10.7c-3.02 0-4.64-.42-6.1-1.2a8.18 8.18 0 01-3.4-3.4C.4 17.93 0 16.3 0 13.29V10.7c0-3.02.42-4.64 1.2-6.1a8.18 8.18 0 013.4-3.4C6.07.4 7.7 0 10.71 0z" fill="#000" fill-rule="nonzero"/></svg>') 48% 41% 37.9% 53.3%;
    }
  }

  @media (--mobile) {
    display: none;
  }

  &__content {
    padding: 6px 10px;
    color: var(--ct-color-font);
    font-size: 12px;
    text-align: center;
    letter-spacing: 0.02em;
    line-height: 1em;
  }

  &::after {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    background-color: var(--ct-color-bg);
    z-index: -1;
  }

  &--bottom {
    transform: translateY(5px);

    &::after {
      top: -3px;
      left: 50%;
      transform: translateX(-50%) rotate(-45deg);
     }
  }

  &--top {
    transform: translateY(-5px);

    &::after {
      top: auto;
      bottom: -3px;
      left: 50%;
      transform: translateX(-50%) rotate(-45deg);
    }
  }

  &--left {
    transform: translateX(-5px);

    &::after {
      top: 50%;
      left: auto;
      right: 0;
      transform: translate(41.6%, -50%) rotate(-45deg);
    }
  }

  &--right {
    transform: translateX(5px);

    &::after {
      top: 50%;
      left: 0;
      transform: translate(-41.6%,-50%) rotate(-45deg);
    }
  }

  &--shown {
    opacity: 1;
    transform: none;
  }
}