@import "tippy.js/dist/tippy.css";

.tippy-box {
  background-color: var(--color-primary);
}
.tippy-box[data-placement^='top'] > .tippy-arrow::before {
  border-top-color: var(--color-primary);
}
.tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
  border-bottom-color: var(--color-primary);
}
.tippy-box[data-placement^='left'] > .tippy-arrow::before {
  border-left-color: var(--color-primary);
}
.tippy-box[data-placement^='right'] > .tippy-arrow::before {
  border-right-color: var(--color-primary);
}

.sbw {
  .tippy-box {
    background-color: var(--color-sbw-secondary);
  }
  .tippy-box[data-placement^='top'] > .tippy-arrow::before {
    border-top-color: var(--color-sbw-secondary);
  }
  .tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: var(--color-sbw-secondary);
  }
  .tippy-box[data-placement^='left'] > .tippy-arrow::before {
    border-left-color: var(--color-sbw-secondary);
  }
  .tippy-box[data-placement^='right'] > .tippy-arrow::before {
    border-right-color: var(--color-sbw-secondary);
  }
}

.snz {
  .tippy-box {
    background-color: var(--color-snz-primary-dark);
  }
  .tippy-box[data-placement^='top'] > .tippy-arrow::before {
    border-top-color: var(--color-snz-primary-dark);
  }
  .tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: var(--color-snz-primary-dark);
  }
  .tippy-box[data-placement^='left'] > .tippy-arrow::before {
    border-left-color: var(--color-snz-primary-dark);
  }
  .tippy-box[data-placement^='right'] > .tippy-arrow::before {
    border-right-color: var(--color-snz-primary-dark);
  }
}

.ser {
  .tippy-box {
    background-color: var(--color-ser-secondary);
  }
  .tippy-box[data-placement^='top'] > .tippy-arrow::before {
    border-top-color: var(--color-ser-secondary);
  }
  .tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: var(--color-ser-secondary);
  }
  .tippy-box[data-placement^='left'] > .tippy-arrow::before {
    border-left-color: var(--color-ser-secondary);
  }
  .tippy-box[data-placement^='right'] > .tippy-arrow::before {
    border-right-color: var(--color-ser-secondary);
  }
}