@ebay/skin/dist/tourtip/tourtip.css

Skin - CSS modules that represent the brand eBay

:root {
    --bubble-shadow:
        0 2px 7px rgba(0, 0, 0, 0.15), 0 5px 17px rgba(0, 0, 0, 0.2);
}
.tourtip {
    position: relative;
}

span.tourtip {
    display: inline-block;
}

.tourtip__overlay {
    box-shadow: var(--bubble-shadow);
    display: none;
    font-size: 14px;
    left: 0;
    max-width: 344px;
    position: absolute;
    top: 0;
    transform: scaleX(1);
    width: max-content;
}

.tourtip__mask,
.tourtip__overlay {
    border-radius: var(--bubble-border-radius, var(--border-radius-100));
    z-index: 1;
}

.tourtip__mask {
    background-color: var(
        --tourtip-background-color,
        var(--color-background-inverse)
    );
    color: var(--tourtip-foreground-color, var(--color-foreground-on-inverse));
    position: relative;
}

span.tourtip__mask {
    display: block;
}

.tourtip__cell {
    display: flex;
    flex-wrap: wrap;
    overflow-wrap: anywhere;
    padding: var(--spacing-200);
    word-break: normal;
}
.tourtip__cell a {
    color: var(--tourtip-foreground-color, var(--color-foreground-on-inverse));
}
.tourtip__cell a:focus {
    outline: 1px dashed currentColor;
}

.tourtip__content {
    flex-basis: 0;
    flex-grow: 1;
}
.tourtip__content p {
    margin: 0;
}
.tourtip__content p:not(:first-of-type) {
    margin-top: var(--spacing-50);
}

button.tourtip__close {
    align-self: flex-start;
    background: none;
    border: 0;
    flex-shrink: 0;
    height: var(--spacing-400);
    margin: calc(var(--spacing-100) * -1) calc(var(--spacing-100) * -1) 0
        var(--spacing-100);
    outline-offset: -2px;
    padding: 0;
    white-space: nowrap;
    width: 32px;
}
button.tourtip__close svg.icon {
    fill: var(--tourtip-foreground-color, var(--color-foreground-on-inverse));
}

.tourtip__pointer {
    background-color: var(
        --tourtip-background-color,
        var(--color-background-inverse)
    );
    height: 8px;
    position: absolute;
    transform: rotate(45deg);
    width: 8px;
    z-index: 0;
}

.tourtip__pointer--top-left {
    left: 12px;
    top: -4px;
}

.tourtip__pointer--top {
    left: calc(50% - 4px);
    top: -4px;
}

.tourtip__pointer--top-right {
    left: auto;
    right: 12px;
    top: -4px;
}

.tourtip__pointer--bottom-left {
    bottom: -4px;
    left: 12px;
    top: auto;
}

.tourtip__pointer--bottom {
    bottom: -4px;
    left: calc(50% - 4px);
    top: auto;
}

.tourtip__pointer--bottom-right {
    bottom: -4px;
    left: auto;
    right: 12px;
    top: auto;
}

.tourtip__pointer--left {
    left: -4px;
    top: calc(50% - 4px);
}

.tourtip__pointer--left-bottom {
    bottom: 12px;
    left: -4px;
    top: auto;
}

.tourtip__pointer--left-top {
    left: -4px;
    top: 12px;
}

.tourtip__pointer--right {
    left: auto;
    right: -4px;
    top: calc(50% - 4px);
}

.tourtip__pointer--right-bottom {
    bottom: 12px;
    left: auto;
    right: -4px;
    top: auto;
}

.tourtip__pointer--right-top {
    left: auto;
    right: -4px;
    top: 12px;
}

.tourtip__heading {
    font-size: var(--font-size-large-1);
    font-weight: 700;
    margin: 0 0 var(--spacing-100);
}

.tourtip--expanded .tourtip__overlay,
span.tourtip__heading {
    display: block;
}

.tourtip__footer {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    width: 100%;
}

.tourtip__footer > button.btn--primary {
    background-color: var(
        --tourtip-background-color,
        var(--color-foreground-on-inverse)
    );
    color: var(--tourtip-foreground-color, var(--color-background-inverse));
}

.tourtip__footer > a:not(:last-child),
.tourtip__footer > button:not(:last-child) {
    margin-right: var(--spacing-200);
}
.tourtip__footer > .fake-link,
.tourtip__footer > a {
    color: var(--color-foreground-on-inverse);
    text-decoration: none;
}
.tourtip__footer > .fake-link:hover:not(:disabled),
.tourtip__footer > a:hover:not(:disabled) {
    color: var(--color-foreground-on-inverse);
    text-decoration: underline;
}
.tourtip__index {
    flex: 1;
}

@media (min-width: 512px) {
    .tourtip__overlay {
        max-width: 400px;
    }
}