/*
 * Wire
 * Copyright (C) 2018 Wire Swiss GmbH
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see http://www.gnu.org/licenses/.
 *
 */

.with-tooltip {
  position: relative;

  &::after {
    position: absolute;
    z-index: 1;
    left: 50%;
    display: block;
    min-width: 160px;
    max-width: 220px;
    padding: 12px;
    border-radius: 4px;
    background-color: var(--app-bg-secondary);
    box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.12);
    color: var(--background);
    content: attr(data-tooltip);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-xs);
    opacity: 0;
    pointer-events: none;
    text-align: center;
    transition: all 0.15s ease-in-out;
  }

  &:hover::after {
    opacity: 1;
    transform: translate(-50%, 0);
    transition: all 0.25s ease-in-out;
  }

  &--top::after {
    bottom: calc(100% + 8px);
    transform: translate(-50%, 16px);
  }

  &--bottom::after {
    top: calc(100% + 8px);
    transform: translate(-50%, -16px);
  }

  &--disabled::after {
    display: none;
  }

  &--receipt,
  &--time {
    &::after {
      right: 0;
      bottom: calc(100% + 4px);
      left: unset;
      min-width: 0;
      padding: 4px;
      color: var(--background-fade-48);
      font-size: var(--font-size-xsmall);
      font-weight: var(--font-weight-regular);
      transform: translate(0, 16px);
      white-space: nowrap;
    }

    &:hover::after {
      transform: translate(0, 0);
    }
  }
  &--external {
    &::after {
      bottom: calc(100% + 1px);
      min-width: 0;
      padding: 2px;
      background-color: #fff;
      color: #9fa1a2;
      font-size: var(--font-size-xsmall);
      font-weight: var(--font-weight-regular);
      transform: translate(-50%, 4px);
      white-space: nowrap;
    }

    &:hover::after {
      transform: translate(-50%, 0);
    }
  }
}