.tooltip {
    @include type(t8);

    .tooltip-inner {
        min-width: 104px;
        padding: spacing(xxxs, -1) spacing(xxxs) spacing(xxxs);
        border-style: solid;
        border-width: 1px;
        text-align: left;
    }

    .tooltip-arrow {
        display: none;
    }

    //
    // Colors
    //

    // Default theme and on light surface
    &,
    .theme-default + & {
        .tooltip-inner {
            border-color: $color-neutral-mid;
            background-color: $color-bg-light-vivid-mid;
            color: $color-type-primary;
        }
    }

    // Alt theme and on dark surface
    .theme-alt + &,
    .theme-on-color + &,
    .theme-on-img-dark + &,
    .theme-dark + & {
        .tooltip-inner {
            border-color: $color-neutral-mid-alt;
            background-color: $color-bg-dark-vivid-mid;
            color: $color-type-primary-alt;
        }
    }
}