.tippy-box[data-theme="user-tips"] {
  background-color: var(--tertiary);
  color: var(--secondary);
  border-color: var(--tertiary);

  .btn-flat {
    color: var(--secondary);

    &:hover {
      color: var(--d-hover);
    }
  }

  .btn-primary {
    background: var(--secondary);
    color: var(--tertiary);

    &:hover {
      color: var(--tertiary-hover);
    }
  }

  > .tippy-svg-arrow {
    color: var(--tertiary);
  }
}

.user-tip {
  z-index: z("composer", "content") - 1;
}

.user-tip-container {
  font-weight: normal;
  min-width: 300px;
  padding: 0.5em;
  text-align: left;

  .user-tip-title {
    font-size: $font-up-2;
    font-weight: bold;
  }

  .user-tip-content {
    margin-top: 0.25em;
  }

  .user-tip-buttons {
    margin-top: 1em;
  }
}

.tippy-box[data-theme~="user-tips"][data-placement^="left"]
  > .tippy-svg-arrow
  > svg {
  left: 12px;
}

.tippy-box[data-theme~="user-tips"][data-placement^="top"]
  > .tippy-svg-arrow
  > svg {
  top: 12px;
}

.tippy-box[data-theme~="user-tips"][data-placement^="bottom"]
  > .tippy-svg-arrow
  > svg {
  top: -14px;
  left: -1px;
}

.tippy-box[data-theme~="user-tips"] > .tippy-svg-arrow:after,
.tippy-box[data-theme~="user-tips"] > .tippy-svg-arrow > svg {
  width: 18px;
  height: 18px;
}