@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .bg-primary {
        background-color: var(--salesloo-primary-bg);
    }
    .bg-secondary {
        background-color: var(--salesloo-secondary-bg);
    }
    .button-primary {
        background-color: var(--salesloo-primary-button-bg);
        border-color: var(--salesloo-primary-button-bg);
        @apply text-white;
    }
    .button-primary:hover {
        background-color: transparent;
        color: var(--salesloo-primary-button-bg);
    }
    .button-secondary {
        background-color: var(--salesloo-secondary-button-bg);
        border-color: var(--salesloo-secondary-button-bg);
        @apply text-white;
    }
    .button-secondary:hover {
        background-color: transparent;
        color: var(--salesloo-secondary-button-bg);
    }
    .button-tertiary {
        background-color: transparent;
        border-color: var(--salesloo-primary-button-bg);
        color: var(--salesloo-primary-button-bg);
    }
    .button-tertiary:hover {
        background-color: var(--salesloo-primary-button-bg);
        @apply text-white;
    }
    .text-primary {
        color: var(--salesloo-primary-text-color);
    }
    .text-secondary {
        color: var(--salesloo-secondary-text-color);
    }
    .text-tertiary {
        color: var(--salesloo-tertiary-text-color);
    }
    .text-quaternary {
        color: var(--salesloo-quaternary-text-color);
    }
}

@layer utilities {
    .tippy-box[data-animation='fade'][data-state='hidden'] {
        opacity: 0;
    }
    [data-tippy-root] {
        max-width: calc(100vw - 10px);
    }
    .tippy-box {
        position: relative;
        background-color: #333;
        color: #fff;
        border-radius: 4px;
        font-size: 14px;
        line-height: 1.4;
        white-space: normal;
        outline: 0;
        transition-property: transform, visibility, opacity;
    }
    .tippy-box[data-placement^='top'] > .tippy-arrow {
        bottom: 0;
    }
    .tippy-box[data-placement^='top'] > .tippy-arrow:before {
        bottom: -7px;
        left: 0;
        border-width: 8px 8px 0;
        border-top-color: initial;
        transform-origin: center top;
    }
    .tippy-box[data-placement^='bottom'] > .tippy-arrow {
        top: 0;
    }
    .tippy-box[data-placement^='bottom'] > .tippy-arrow:before {
        top: -7px;
        left: 0;
        border-width: 0 8px 8px;
        border-bottom-color: initial;
        transform-origin: center bottom;
    }
    .tippy-box[data-placement^='left'] > .tippy-arrow {
        right: 0;
    }
    .tippy-box[data-placement^='left'] > .tippy-arrow:before {
        border-width: 8px 0 8px 8px;
        border-left-color: initial;
        right: -7px;
        transform-origin: center left;
    }
    .tippy-box[data-placement^='right'] > .tippy-arrow {
        left: 0;
    }
    .tippy-box[data-placement^='right'] > .tippy-arrow:before {
        left: -7px;
        border-width: 8px 8px 8px 0;
        border-right-color: initial;
        transform-origin: center right;
    }
    .tippy-box[data-inertia][data-state='visible'] {
        transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
    }
    .tippy-arrow {
        width: 16px;
        height: 16px;
        color: #333;
    }
    .tippy-arrow:before {
        content: '';
        position: absolute;
        border-color: transparent;
        border-style: solid;
    }
    .tippy-content {
        position: relative;
        padding: 5px 9px;
        z-index: 1;
    }
}
