@import '../../../scss/variables';
@import '../../../scss/mixins';

.Tooltip {
  top: 0.25rem;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: max-content;
  gap: 1.5rem;

  :global(.tooltip-notch) {
    display: none;
  }

  &:global(.tooltip) {
    transform: translate(-50%, 0);
    &:global(.is-visible):not(:global(.backwards)) {
      transform: translate(-50%, 0);
    }
    &:global(.mounted) {
      transform: translate(-50%, -1rem);
    }
  }

  &:global(.tooltip-with-icon) :global(.tooltip-text) {
    padding-inline-start: 2rem;
  }

  :global(.tooltip-icon) {
    color: var(--danger-color);
  }
}

.Button {
  overflow: hidden;

  font-size: 14px;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;

  color: rgb(142, 222, 255);

  @include hover-global(rgba(142, 222, 255, 0.075), background-color, false);
}
