@import '@zendeskgarden/css-variables';

:root {
  /* stylelint-disable max-line-length */
  --zd-tooltip--light-background-color: var(--zd-color-white);
  --zd-tooltip--light-border: 1px solid var(--zd-color-grey-300);
  --zd-tooltip--light-box-shadow:
    0 12px 20px 0
    color-mod(var(--zd-color-kale-600) alpha(15%));
  --zd-tooltip--light-color: var(--zd-color-grey-700);
  --zd-tooltip--light__arrow-font-size: calc(var(--zd-tooltip__arrow-font-size) + 2px);
  --zd-tooltip--light--large__arrow-font-size: calc(var(--zd-tooltip--large__arrow-font-size) + 2px);
  --zd-tooltip--light--extra-large__arrow-font-size: calc(var(--zd-tooltip--extra-large__arrow-font-size) + 2px);
  --zd-tooltip--light__title-color: var(--zd-color-grey-800);
  /* stylelint-enable max-line-length */
}

.c-tooltip--light {
  border: var(--zd-tooltip--light-border);
  box-shadow: var(--zd-tooltip--light-box-shadow);
  background-color: var(--zd-tooltip--light-background-color);
  color: var(--zd-tooltip--light-color);
}

.c-tooltip--light.c-arrow::before,
.c-tooltip--light.c-arrow::after {
  font-size: var(--zd-tooltip--light__arrow-font-size);
}

.c-tooltip--light.c-tooltip--large.c-arrow::before,
.c-tooltip--light.c-tooltip--large.c-arrow::after {
  font-size: var(--zd-tooltip--light--large__arrow-font-size);
}

.c-tooltip--light.c-tooltip--extra-large.c-arrow::before,
.c-tooltip--light.c-tooltip--extra-large.c-arrow::after {
  font-size: var(--zd-tooltip--light--extra-large__arrow-font-size);
}

.c-tooltip--light .c-tooltip__title {
  color: var(--zd-tooltip--light__title-color);
}