budibase/packages/standard-components/node_modules/@spectrum-css/tooltip/index.css

/*
Copyright 2019 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/

@import "../overlay/index.css";

.spectrum-Tooltip {
  --spectrum-tooltip-target-offset: 3px;
  /* This variable needs to be updated in Spectrum DNA. Using the height variable so it scales to spectrum-large */
  --spectrum-tooltip-tip-width: var(--spectrum-tooltip-tip-height);
}

.spectrum-Tooltip {
  @inherit: %spectrum-overlay;

  position: relative;
  left: 0px;
  top: 0px;

  display: inline-flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;

  vertical-align: top;

  width: auto;
  padding: var(--spectrum-tooltip-padding-top) var(--spectrum-tooltip-padding-x);
  border-radius: var(--spectrum-tooltip-border-radius);
  min-height: var(--spectrum-tooltip-min-height);
  max-inline-size: var(--spectrum-tooltip-max-width);

  font-size: var(--spectrum-tooltip-text-size);
  font-weight: var(--spectrum-tooltip-text-font-weight);
  line-height: var(--spectrum-tooltip-text-line-height);
  word-break: break-word;
  -webkit-font-smoothing: antialiased;

  &.is-open {
    @inherit: %spectrum-overlay--open;
  }

  & {
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  p {
    margin: 0;
  }
}

.spectrum-Tooltip-tip {
  position: absolute;

  height: 0;
  width: 0;

  border-width: var(--spectrum-tooltip-tip-width);
  border-style: solid;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}

.spectrum-Tooltip--right,
.spectrum-Tooltip--left {
  .spectrum-Tooltip-tip {
    top: 50%;
    margin-top: calc(-1 * var(--spectrum-tooltip-tip-width));
  }
}

.spectrum-Tooltip--right {
  margin-left: var(--spectrum-tooltip-target-offset);
  &.is-open {
    @inherit: %spectrum-overlay--right--open;
  }
  .spectrum-Tooltip-tip {
    right: 100%;
    transform: rotate(90deg);
  }
}

.spectrum-Tooltip--left {
  margin-right: var(--spectrum-tooltip-target-offset);
  &.is-open {
    @inherit: %spectrum-overlay--left--open;
  }
  .spectrum-Tooltip-tip {
    left: 100%;
    transform: rotate(-90deg);
  }
}

.spectrum-Tooltip--top {
  margin-bottom: var(--spectrum-tooltip-target-offset);
  &.is-open {
    @inherit: %spectrum-overlay--top--open;
  }
  .spectrum-Tooltip-tip {
    top: 100%;
  }
}

.spectrum-Tooltip--bottom {
  margin-top: var(--spectrum-tooltip-target-offset);
  &.is-open {
    @inherit: %spectrum-overlay--bottom--open;
  }
  .spectrum-Tooltip-tip {
    bottom: 100%;
    transform: rotate(-180deg);
  }
}

.spectrum-Tooltip--bottom,
.spectrum-Tooltip--top {
  .spectrum-Tooltip-tip {
    left: 50%;
    margin-left: calc(-1 * var(--spectrum-tooltip-tip-width));
  }
}

.spectrum-Tooltip-typeIcon {
  margin-inline-start: calc(
    var(--spectrum-tooltip-icon-margin-x) - var(--spectrum-tooltip-padding-x)
  );
  margin-inline-end: var(--spectrum-tooltip-icon-margin-x);
  width: var(--spectrum-tooltip-icon-size);
  height: var(--spectrum-tooltip-icon-size);
  align-self: flex-start;
  flex-shrink: 0;

  /* Adjusts for weird misalignment */
  margin-block-start: 1px;
}

.spectrum-Tooltip-label {
  /* Make sure line height is correct to prevent problems in Windows */
  line-height: var(--spectrum-tooltip-text-line-height);
}

.u-tooltip-showOnHover {
  display: inline-block;
  position: relative;

  .spectrum-Tooltip {
    position: absolute;
    white-space: nowrap;
    /* Required for animations to work, !important for diff scaling to work */
    visibility: visible !important;
    transition: transform var(--spectrum-global-animation-duration-100)
      ease-in-out;
    top: -100%;
  }

  .spectrum-Tooltip-label {
    /* Don't try to wrap as the mechanism used for this helper does not support wrapping */
    max-width: none;
  }

  .spectrum-Tooltip--right,
  .spectrum-Tooltip--left {
    top: 50%;
    .spectrum-Tooltip-tip {
      top: 50%;
    }
  }

  .spectrum-Tooltip--right {
    left: 100%;
    transform: translate(0, -50%);
  }

  .spectrum-Tooltip--left {
    transform: translate(-100%, -50%);
  }

  .spectrum-Tooltip--bottom,
  .spectrum-Tooltip--top {
    left: 50%;
    .spectrum-Tooltip-tip {
      left: 50%;
    }
  }

  .spectrum-Tooltip--bottom {
    top: 100%;
    transform: translate(-50%, calc(-1 * var(--spectrum-tooltip-tip-margin)));
  }

  .spectrum-Tooltip--top {
    transform: translate(-50%, var(--spectrum-tooltip-tip-margin));
  }

  &:hover .spectrum-Tooltip,
  &:focus .spectrum-Tooltip,
  &.is-focused .spectrum-Tooltip,
  *:focus .spectrum-Tooltip {
    opacity: 1;
  }

  &:hover .spectrum-Tooltip.spectrum-Tooltip--bottom,
  &:focus .spectrum-Tooltip.spectrum-Tooltip--bottom,
  &.is-focused .spectrum-Tooltip.spectrum-Tooltip--bottom,
  *:focus .spectrum-Tooltip.spectrum-Tooltip--bottom {
    transform: translate(-50%, 0);
  }

  &:hover .spectrum-Tooltip.spectrum-Tooltip--top,
  &:focus .spectrum-Tooltip.spectrum-Tooltip--top,
  &.is-focused .spectrum-Tooltip.spectrum-Tooltip--top,
  *:focus .spectrum-Tooltip.spectrum-Tooltip--top {
    transform: translate(-50%, calc(-1 * var(--spectrum-tooltip-tip-margin)));
  }

  &:hover .spectrum-Tooltip.spectrum-Tooltip--left,
  &:focus .spectrum-Tooltip.spectrum-Tooltip--left,
  &.is-focused .spectrum-Tooltip.spectrum-Tooltip--left,
  *:focus .spectrum-Tooltip.spectrum-Tooltip--left {
    transform: translate(
      calc(-100% - var(--spectrum-tooltip-tip-margin)),
      -50%
    );
  }

  &:hover .spectrum-Tooltip.spectrum-Tooltip--right,
  &:focus .spectrum-Tooltip.spectrum-Tooltip--right,
  &.is-focused .spectrum-Tooltip.spectrum-Tooltip--right,
  *:focus .spectrum-Tooltip.spectrum-Tooltip--right {
    transform: translate(var(--spectrum-tooltip-tip-margin), -50%);
  }
}