@mixin s1-tooltip() {
  background: var(--s1-N-100-color) !important;
  border-radius: 4px !important;
  box-shadow: var(--s1-shadow-6);
  color: var(--s1-N-0-color) !important;
  font-size: 13px !important;
  word-wrap: break-word;
  padding: {
    bottom: 8px;
    left: 8px !important;
    right: 8px !important;
    top: 8px;
  }

  /** Used if need white background */
  &.light-tooltip {
    background: var(--s1-N-0-color) !important;
    color: var(--s1-N-90-color) !important;
  }

  /** Used by sing-ellipsis */
  /* stylelint-disable selector-class-pattern */
  &.clipboard.mac::after,
  &.clipboard.Mac::after {
    color: var(--s1-N-0-color);
    content: '(CMD+C to copy this content to clipboard)';
    display: block;
    font-size: 10px;
    font-weight: bold;
    margin-top: 10px;
  }

  /** Used by sing-ellipsis */
  &.clipboard.windows::after,
  &.clipboard.Windows::after {
    color: var(--s1-N-0-color);
    content: '(CTRL+C to copy this content to clipboard)';
    display: block;
    font-size: 10px;
    font-weight: bold;
    margin-top: 10px;
  }
}

.mat-tooltip {
  @include s1-tooltip;
  max-width: 300px !important;
}

.s1-tooltip {
  @include s1-tooltip;
}