@import '../variables';
@import '../bootstrap';

$tooltip-color: #22222B;
$dark-tooltip-color: #7b52eb;

:root {
  --itf-tooltip-shadow: 0 0 20px 4px rgba(154, 161, 177, .15), 0 4px 80px -8px rgba(36, 40, 47, .25), 0 4px 4px -2px rgba(91, 94, 105, .15);
  --itf-tooltip-color: #FFF;
  --itf-tooltip-bg-color: #{$tooltip-color};
  --itf-tooltip-font-size: 14px;

  --itf-tooltip-light-shadow: 0px 8px 35px rgba(0, 0, 0, 0.16);
  --itf-tooltip-light-color: #{$tooltip-color};
  --itf-tooltip-light-bg-color: #fff;
  --itf-tooltip-light-border-color: #E7E8EC;
}

[data-theme="dark"] {
  --itf-tooltip-shadow: 0 0 20px 4px rgba(87, 78, 101, 0.15), 0 4px 80px -8px rgba(211, 208, 219, 0.25), 0 4px 4px -2px rgba(156, 150, 164, 0.15);
  --itf-tooltip-color: #{$dark-body-color};
  --itf-tooltip-bg-color: #{$dark-tooltip-color};
  --itf-tooltip-font-size: 14px;

  --itf-tooltip-light-shadow: 0 0 20px 4px rgba(87, 78, 101, 0.1), 0 4px 80px -8px rgba(211, 208, 219, 0.1), 0 4px 4px -2px rgba(156, 150, 164, 0.1);
  --itf-tooltip-light-color: #{$dark-body-color};
  --itf-tooltip-light-bg-color: #2a2a35;
  --itf-tooltip-light-border-color: #3e3e50;
}

.tippy-box[data-theme~=itfin] {
  color: var(--itf-tooltip-color);
  background-color: var(--itf-tooltip-bg-color);
  font-size: var(--itf-tooltip-font-size);
  border-radius: 0.5rem;
  box-shadow: var(--itf-tooltip-shadow);
  padding: .25rem .5rem;
  cursor: default;
  a {
    color: var(--itf-tooltip-color);
    text-decoration: underline;
  }

  &[data-placement^=top] > .tippy-arrow:before {
    border-top-color: var(--itf-tooltip-bg-color);
  }

  &[data-placement^=bottom] > .tippy-arrow:before {
    border-bottom-color: var(--itf-tooltip-bg-color);
  }

  &[data-placement^=left] > .tippy-arrow:before {
    border-left-color: var(--itf-tooltip-bg-color);
  }

  &[data-placement^=right] > .tippy-arrow:before {
    border-right-color: var(--itf-tooltip-bg-color);
  }

  & > .tippy-backdrop {
    background-color: var(--itf-tooltip-bg-color);
  }

  & > .tippy-svg-arrow {
    fill: var(--itf-tooltip-bg-color);
  }
}

.tippy-box[data-theme~=nomi-light] {
  color: var(--itf-tooltip-light-color);
  background-color: var(--itf-tooltip-light-bg-color);
  font-size: var(--itf-tooltip-font-size);
  border-radius: 0.5rem;
  box-shadow: var(--itf-tooltip-light-shadow);
  border: 1px solid var(--itf-tooltip-light-border-color);
  padding: .5rem .5rem;
  cursor: default;

  a {
    color: var(--itf-tooltip-light-color);
    text-decoration: underline;
  }

  &[data-placement^=top] > .tippy-arrow:before {
    border-top-color: var(--itf-tooltip-light-bg-color);
  }

  &[data-placement^=bottom] > .tippy-arrow:before {
    border-bottom-color: var(--itf-tooltip-light-bg-color);
  }

  &[data-placement^=left] > .tippy-arrow:before {
    border-left-color: var(--itf-tooltip-light-bg-color);
  }

  &[data-placement^=right] > .tippy-arrow:before {
    border-right-color: var(--itf-tooltip-light-bg-color);
  }

  & > .tippy-backdrop {
    background-color: var(--itf-tooltip-light-bg-color);
  }

  & > .tippy-svg-arrow {
    fill: var(--itf-tooltip-light-bg-color);
    stroke: var(--itf-tooltip-light-border-color);
    stroke-width: 1px;
  }
}

.tippy-box[data-animation=scale][data-placement^=top] {
  transform-origin: bottom
}

.tippy-box[data-animation=scale][data-placement^=bottom] {
  transform-origin: top
}

.tippy-box[data-animation=scale][data-placement^=left] {
  transform-origin: right
}

.tippy-box[data-animation=scale][data-placement^=right] {
  transform-origin: left
}

.tippy-box[data-animation=scale][data-state=hidden] {
  transform: scale(.5);
  opacity: 0
}
