.inline-launch-button {
    display: inline-block;
    position: relative;

    &__button {
        all: unset;
        border: 2px solid;
        border-color: rgba(0, 0, 0, 0.16);
        border-radius: 8px;
        padding: 2px;
        cursor: pointer;

        svg {
            width: 18px;
            height: 18px;
        }
    }

    &__label {
        display: none;
        position: absolute;
        box-sizing: border-box;
        top: calc(100% + 2px);
        white-space: nowrap;
        background: $sds-grey-900;
        color: $sds-white;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: $sds-text-md-regular-font-size;
        transform: translateX(
            calc(-50% + 13px)
        ); // === half of self to the left, minus half the width of the button (13px) which it stars offset to the right
    }

    &:hover,
    &:focus-within {
        .inline-launch-button__label {
            display: flex;
        }

        .inline-launch-button__button {
            border-color: $sds-blue-300;
            background: $sds-blue-100;
            svg path {
                fill: $sds-blue-400;
            }
        }
    }
}