.ticket-sharing-block {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  z-index: 1;
  transition: transform 150ms ease-in;
  transform: translateX(0);

  &:hover {
    z-index: 3;
  }
}

.ticket-sharing-buttons {
  position: relative;
  top: 20px;
  flex-direction: column;
  align-items: flex-end;
  display: flex;
}

.ticket-share-button {
  position: relative;
  width: 30px;
  height: 34px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
  box-sizing: border-box;
  transition: background-color 150ms ease-in-out;
  cursor: pointer;
  overflow: visible;

  &:hover {
    background-color: #f7f7f7;

    .ticket-share-button-tooltip {
      opacity: 0.97;
      transform: translateX(5px);
    }
  }
}

.ticket-share-button-tooltip {
  position: absolute;
  top: 1px;
  right: 40px;
  display: block;
  width: auto;
  padding: 10px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 250ms ease-in-out, transform 200ms ease-in;

  &::after {
    position: absolute;
    top: 12px;
    right: -4px;
    content: "";
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
  }

}

.ticket-share-button-fb {
  border-top: 1px solid #e4e7e7;
  border-right: 1px solid #e4e7e7;
  border-top-right-radius: 3px;

  .ticket-share-button-tooltip {
    background-color: #395692;

    &::after {
      background-color: #395692;
    }
  }
}

.ticket-share-button-tw {
  border: 1px solid #e4e7e7;
  border-left: none;

  .ticket-share-button-tooltip {
    background-color: #429cde;

    &::after {
      background-color: #429cde;
    }
  }
}

.ticket-share-button-link {
  border-bottom: 1px solid #e4e7e7;
  border-right: 1px solid #e4e7e7;
  border-bottom-right-radius: 3px;

  .ticket-share-button-tooltip {
    background-color: #494b50;

    &::after {
      background-color: #494b50;
    }
  }

  .copy-link-tooltip-wrapper {
    position: absolute;
    top: -2px;
    right: 29px;
    width: auto;
    height: auto;
    overflow: hidden;

    .ticket-share-button-tooltip {
      position: relative;
      right: 0;
      margin: 2px 10px;
    }
  }

  .copy-link-input {
    position: absolute;
    top: -200px;
    width: 201px;
    height: 22px;
    padding: 0 7px;
    font-size: 12px;
    font-weight: 600;
    line-height: 15px;
    background-color: #18191B;
    color: #fff;
    border-radius: 2px;
  }

  &.fallback {
    .ticket-share-button-tooltip {
      padding: 5px 10px;
    }

    .copy-link-text {
      display: none;
    }

    .copy-link-input {
      position: static;
    }
  }
}

.ticket:hover {
  .ticket-sharing-block {
    transform: translateX(31px);
  }
}