@mixin tooltip-color($color) {
    // Defines the tooltip colors
    &::after {
        background-color: $color;
        color: get-contrast-color($color);
    }
    &::before {
        border-top-color: $color;
        border-bottom-color: $color;
    }
}

// Base tooltip styles
*[data-tooltip="tooltip"] {
    position: relative;

    // Hide the tooltips if they are applied to the disabled object
    &.disabled,
    &:disabled {
        &::after, &::before {
            display: none !important; /* Hide the tooltip pseudo-elements */
        }
    }

    // Tooltip block styles
    &::after {
        content: '';
        position: absolute;
        z-index: 1;

        border-radius: $base-border-radius;
        padding: $base-padding;
        font-size: 12px;

        // Hidden by default
        display: none;

        // Default dimensions
        max-width: 100%;
        min-width: 200px;
        width: auto;
        height: auto;

        // Default position
        bottom: calc(100% + 14px);
        left: 50%;
        transform: translateX(-50%);
    }

    // Tooltip arrow
    &::before {
        content: '';
        position: absolute;
        z-index: 2;

        width: 0;
        height: 0;

        // Hidden by default
        display: none;

        // Default color
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 14px solid transparent;

        // Default position
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
    }

    // Include a mixin with the default colors
    @include tooltip-color($dark);

    &:hover {
        &::after {
            display: block;
        }
        &::before {
            display: block;
        }
    }

    // tooltip positions
    &[data-tooltip-placement="top"] {
        &::after {
            top: auto !important;
            left: 50% !important;
            bottom: calc(100% + 14px) !important;
            right: auto !important;
            transform: translate(-50%, 0) !important;
        }
        &::before {
            top: auto !important;
            left: 50% !important;
            bottom: 100% !important;
            right: auto !important;
            transform: translate(-50%, 0) !important;
        }
    }

    &[data-tooltip-placement="bottom"] {
        &::after {
            top: calc(100% + 14px) !important;
            left: 50% !important;
            bottom: auto !important;
            right: auto !important;
            transform: translate(-50%, 0) !important;
        }
        &::before {
            top: 100% !important;
            left: 50% !important;
            bottom: auto !important;
            right: auto !important;
            transform: translate(-50%, 0) rotate(180deg) !important;
        }
    }

    &[data-tooltip-placement="left"] {
        &::after {
            top: 50%;
            left: auto !important;
            bottom: auto !important;
            right: calc(100% + 14px) !important;;
            transform: translate(0, -50%) !important;
        }
        &::before {
            top: 50% !important;
            left: auto !important;
            bottom: auto !important;
            right: 100% !important;
            transform: translate(0, -50%) rotate(-90deg) !important;
        }
    }

    &[data-tooltip-placement="right"] {
        &::after {
            top: 50%;
            left: calc(100% + 14px) !important;;
            bottom: auto !important;
            right: auto !important;
            transform: translate(0, -50%) !important;
        }
        &::before {
            top: 50% !important;
            left: 100% !important;
            bottom: auto !important;
            right: auto !important;
            transform: translate(0, -50%) rotate(90deg) !important;
        }
    }
}



// Iterate over each key-val in the $theme-color-palette
@each $key, $val in $theme-color-palette {
    // Generate color classes for each tooltip
    .tooltip-#{$key} {
        @include tooltip-color($val);
    }

    // Iterate over each state in the $state-selectors
    @each $state in $state-selectors {
        // Create classes for each state
        .#{$state}\:tooltip-#{$key}:#{$state} {
            @include tooltip-color($val);
        }
    }

    // Iterate over each bp_key-bp_val pair in the $breakpoints
    @each $bp_key, $bp_val in $breakpoints {
        @media (min-width: $bp_val) {
            // Create classes for each breakpoint value
            // Generate color classes for each tooltip
            .#{$bp_key}\:tooltip-#{$key} {
                @include tooltip-color($val);
            }

            // Iterate over each state in the $state-selectors
            @each $state in $state-selectors {
                // Create classes for each state
                .#{$bp_key}\:#{$state}\:tooltip-#{$key}:#{$state} {
                    @include tooltip-color($val);
                }
            }
        }
    }
}

@each $key, $val in $base-color-palette {
    // Generate color classes for all shades
    @for $i from 1 through 9 {
        // Define color shade
        $shade: if($i <= 4, generate-shade($val, 100-$i*10, 'lighten'), generate-shade($val, $i*10-40, 'darken'));

        // Generate color classes for each tooltip
        .tooltip-#{$key}-#{$i * 100} {
            @include tooltip-color($shade);
        }

        // Iterate over each state in the $state-selectors
        @each $state in $state-selectors {
            // Create classes for each state
            .#{$state}\:tooltip-#{$key}-#{$i * 100}:#{$state} {
                @include tooltip-color($shade);
            }
        }

        // Iterate over each bp_key-bp_val pair in the $breakpoints
        @each $bp_key, $bp_val in $breakpoints {
            @media (min-width: $bp_val) {
                // Create classes for each breakpoint value
                // Generate color classes for each tooltip
                .#{$bp_key}\:tooltip-#{$key}-#{$i * 100} {
                    @include tooltip-color($shade);
                }

                // Iterate over each state in the $state-selectors
                @each $state in $state-selectors {
                    // Create classes for each state
                    .#{$bp_key}\:#{$state}\:tooltip-#{$key}-#{$i * 100}:#{$state} {
                        @include tooltip-color($shade);
                    }
                }
            }
        }
    }
}