// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC Sucursal en España SL

@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/z-index.scss" as *;
@use "ds/typography.scss" as t;

$arrow-side: 12px;

.tooltip {
  position: fixed;
  max-inline-size: $sz-352;
  background-color: transparent;
  overflow: hidden;
  inline-size: fit-content;
  block-size: fit-content;
  z-index: var(--z-index-notifications);
}

.tooltip-content-wrapper {
  display: grid;
  inline-size: fit-content;
  block-size: fit-content;
}

.tooltip-arrow {
  background-color: var(--color-background-primary);
  border-radius: var(--sp-xs);
  inline-size: $arrow-side;
  block-size: $arrow-side;
  grid-area: arrow;
}

.tooltip-top {
  grid-template-areas:
    "content"
    "arrow";
}

.tooltip-top .tooltip-arrow {
  justify-self: center;
  border-radius: 0 0 var(--sp-xs) 0;
  transform-origin: 0 0;
  transform: rotate(45deg) translate(-2px, -10px);
  border-block-end: $b-1 solid var(--color-accent-primary-muted);
  border-inline-end: $b-1 solid var(--color-accent-primary-muted);
}

.tooltip-bottom {
  grid-template-areas:
    "arrow"
    "content";
}

.tooltip-bottom .tooltip-arrow {
  justify-self: center;
  border-radius: var(--sp-xs) 0;
  transform-origin: 0 0;
  transform: rotate(45deg) translate(7px, -2px);
  border-block-start: $b-1 solid var(--color-accent-primary-muted);
  border-inline-start: $b-1 solid var(--color-accent-primary-muted);
}

.tooltip-left {
  grid-template-areas: "content arrow ";
}

.tooltip-left .tooltip-arrow {
  align-self: center;
  border-radius: 0 var(--sp-xs);
  transform-origin: 0 0;
  transform: rotate(45deg) translate(-2px, -1px);
  border-block-start: $b-1 solid var(--color-accent-primary-muted);
  border-inline-end: $b-1 solid var(--color-accent-primary-muted);
}

.tooltip-right {
  grid-template-areas: "arrow content";
}

.tooltip-right .tooltip-arrow {
  align-self: center;
  border-radius: 0 var(--sp-xs);
  transform-origin: 0 0;
  transform: rotate(45deg) translate(7px, -10px);
  border-block-end: $b-1 solid var(--color-accent-primary-muted);
  border-inline-start: $b-1 solid var(--color-accent-primary-muted);
}

.tooltip-top-right {
  grid-template-areas:
    "content"
    "arrow";
}

.tooltip-top-right .tooltip-arrow {
  margin: 0 var(--sp-l);
  border-radius: var(--sp-xs) 0;
  transform: rotate(45deg) translateX(calc(-1 * var(--sp-s)));
  border-block-end: $b-1 solid var(--color-accent-primary-muted);
  border-inline-end: $b-1 solid var(--color-accent-primary-muted);
}

.tooltip-bottom-right {
  grid-template-areas:
    "arrow"
    "content";
}

.tooltip-bottom-right .tooltip-arrow {
  margin: 0 var(--sp-s);
  transform: rotate(45deg) translateX(var(--sp-s));
  border-radius: var(--sp-xs) 0;
  border-block-start: $b-1 solid var(--color-accent-primary-muted);
  border-inline-start: $b-1 solid var(--color-accent-primary-muted);
}

.tooltip-bottom-left {
  grid-template-areas:
    "arrow"
    "content";
}

.tooltip-bottom-left .tooltip-arrow {
  justify-self: end;
  margin: 0 var(--sp-s);
  transform: rotate(45deg) translateY(var(--sp-s));
  border-radius: var(--sp-xs) 0;
  border-block-start: $b-1 solid var(--color-accent-primary-muted);
  border-inline-start: $b-1 solid var(--color-accent-primary-muted);
}

.tooltip-top-left {
  grid-template-areas:
    "content"
    "arrow";
}

.tooltip-top-left .tooltip-arrow {
  margin: 0 var(--sp-s);
  justify-self: end;
  border-radius: var(--sp-xs) 0;
  transform: rotate(45deg) translateX(calc(-1 * var(--sp-s)));
  border-block-end: $b-1 solid var(--color-accent-primary-muted);
  border-inline-end: $b-1 solid var(--color-accent-primary-muted);
}

.tooltip-content {
  @include t.use-typography("body-small");

  background-color: var(--color-background-primary);
  color: var(--color-foreground-secondary);
  border-radius: var(--sp-xs);
  border: $b-1 solid var(--color-accent-primary-muted);
  padding: var(--sp-s) var(--sp-m);
  grid-area: content;
  block-size: fit-content;
  overflow-wrap: anywhere;
}

.tooltip-trigger {
  block-size: fit-content;
  inline-size: fit-content;
  line-height: 0;
  display: grid;
  max-width: 100%;
}