@import '@vtmn/css-design-tokens/src/base-colors';
@import '@vtmn/css-design-tokens/src/themes/default';
@import '@vtmn/css-design-tokens/src/typography';
@import '@vtmn/css-design-tokens/src/opacities';
@import '@vtmn/css-design-tokens/src/shadows';
@import '@vtmn/css-design-tokens/src/animations';
@import '@vtmn/css-design-tokens/src/z-indexes';
@import '@vtmn/css-design-tokens/src/radius';

.vtmn-tooltip {
  position: relative;
  font-family: var(--vtmn-typo_font-family);
  font-size: var(--vtmn-typo_text-3-font-size);
  font-weight: var(--vtmn-typo_font-weight--normal);
  outline: 0;
}

/* Applies to all tooltips */
.vtmn-tooltip::before,
.vtmn-tooltip::after {
  z-index: var(--vtmn-z-index_tooltip);
  font-family: var(--vtmn-typo_font-family);
  font-size: var(--vtmn-typo_text-3-font-size);
  font-weight: var(--vtmn-typo_font-weight--normal);
  line-height: var(--vtmn-typo_text-3-line-height);
  box-shadow: var(--vtmn-shadow_200);
  user-select: none;
  position: absolute;
  display: none;
}

.vtmn-tooltip::before {
  content: '';
  border: rem(8px) solid transparent;
}

.vtmn-tooltip::after {
  content: attr(data-tooltip);
  inline-size: fit-content;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-block: rem(8px);
  padding-inline: rem(12px);
  block-size: rem(36px);
  border-radius: var(--vtmn-radius_100);
  background-color: var(--vtmn-semantic-color_background-primary-reversed);
  color: var(--vtmn-semantic-color_content-primary-reversed);
  box-sizing: border-box;
}

.vtmn-tooltip:focus-visible,
.vtmn-tooltip:focus-visible > * {
  outline: none;
  box-shadow: var(--vtmn-shadow_focus-visible);
}

/* don't show empty tooltips */
.vtmn-tooltip[data-tooltip='']::before,
.vtmn-tooltip[data-tooltip='']::after {
  display: none !important;
}

/* POSITION: TOP */
.vtmn-tooltip:not([data-position])::before,
.vtmn-tooltip[data-position^='top']::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top: rem(8px) solid
    var(--vtmn-semantic-color_background-primary-reversed);
  left: 50%;
  transform: translate(-50%, -78%);
}

.vtmn-tooltip:not([data-position])::after,
.vtmn-tooltip[data-position^='top']::after {
  bottom: calc(100% + rem(7px));
  left: 50%;
  transform: translate(-50%, -0.5em);
}

/* POSITION: TOP-LEFT */
.vtmn-tooltip:not([data-position])::after,
.vtmn-tooltip[data-position='top-left']::after {
  left: rem(-10px);
}

/* POSITION: TOP-RIGHT */
.vtmn-tooltip:not([data-position])::after,
.vtmn-tooltip[data-position='top-right']::after {
  transform: translate(rem(-20px), -0.5em);
}

/* POSITION: BOTTOM */
.vtmn-tooltip[data-position^='bottom']::before {
  top: 100%;
  border-top-width: 0;
  border-bottom: rem(8px) solid
    var(--vtmn-semantic-color_background-primary-reversed);
  left: 50%;
  transform: translate(-50%, 78%);
}

.vtmn-tooltip[data-position^='bottom']::after {
  top: calc(100% + rem(7px));
  left: 50%;
  transform: translate(-50%, 0.5em);
}

/* POSITION: BOTTOM-LEFT */
.vtmn-tooltip[data-position='bottom-left']::after {
  left: rem(-10px);
}

/* POSITION: BOTTOM-RIGHT */
.vtmn-tooltip[data-position='bottom-right']::after {
  transform: translate(rem(-20px), 0.5em);
}

/* POSITION: LEFT */
.vtmn-tooltip[data-position^='left']::before {
  top: 50%;
  border-right-width: 0;
  border-left: rem(8px) solid
    var(--vtmn-semantic-color_background-primary-reversed);
  left: calc(0em - rem(8px));
  transform: translate(-76%, -50%);
}

.vtmn-tooltip[data-position^='left']::after {
  top: 50%;
  right: calc(100% + rem(7px));
  transform: translate(-0.5em, -50%);
}

/* POSITION: RIGHT */
.vtmn-tooltip[data-position^='right']::before {
  top: 50%;
  border-left-width: 0;
  border-right: rem(8px) solid
    var(--vtmn-semantic-color_background-primary-reversed);
  right: calc(0em - rem(8px));
  transform: translate(76%, -50%);
}

.vtmn-tooltip[data-position^='right']::after {
  top: 50%;
  left: calc(100% + rem(7px));
  transform: translate(0.5em, -50%);
}

@media screen and (min-width: 900px) {
  .vtmn-tooltip:not([data-tooltip='']):hover::before,
  .vtmn-tooltip:not([data-tooltip='']):hover::after,
  .vtmn-tooltip:not([data-tooltip='']):focus-visible::before,
  .vtmn-tooltip:not([data-tooltip='']):focus-visible::after {
    animation: var(--vtmn-animation_fade-in);
  }

  /* Make the tooltips respond to hover */
  .vtmn-tooltip:hover::before,
  .vtmn-tooltip:hover::after,
  .vtmn-tooltip:focus-visible::before,
  .vtmn-tooltip:focus-visible::after {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media screen and (max-width: 899px) {
  .vtmn-tooltip:not([data-tooltip='']):focus::before,
  .vtmn-tooltip:not([data-tooltip='']):focus::after {
    animation: var(--vtmn-animation_fade-in);
  }

  /* Make the tooltips respond to focus */
  .vtmn-tooltip:focus::before,
  .vtmn-tooltip:focus::after {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
