.tippy-box[data-theme~='light-border'] {
    $tippy-bg: $gray1;
    $tippy-border: $gray7;

    border: 1px solid $tippy-border;
    border-radius: $sd-tooltip-corner-radius;
    background-color: $tippy-bg;
    box-shadow: none;

    .tippy-content {
        padding: 16px;
        font-weight: $sd-font-weight-regular;
        text-align: left;
    }

    // .tippy-arrow::after - border applies the border of arrow
    // .tippy-arrow::before - border applies the background of arrow
    &[data-placement^='top'] {
        > .tippy-arrow::after {
            border-top-color: $tippy-border;
        }
        > .tippy-arrow::before {
            border-top-color: $tippy-bg;
        }
    }
    &[data-placement^='bottom'] {
        > .tippy-arrow::after {
            border-bottom-color: $tippy-border;
        }
        > .tippy-arrow::before {
            border-bottom-color: $tippy-bg;
        }
    }
    &[data-placement^='left'] {
        > .tippy-arrow::after {
            border-left-color: $tippy-border;
        }
        > .tippy-arrow::before {
            border-left-color: $tippy-bg;
        }
    }
    &[data-placement^='right'] {
        > .tippy-arrow::after {
            border-right-color: $tippy-border;
        }
        > .tippy-arrow::before {
            border-right-color: $tippy-bg;
        }
    }

    a,
    .sd-button-anchor {
        @include sd-link;
    }
}