@import 'color';

$joyride-color: $brand-orange;
$joyride-button-bg-color: $brand-btn;
$joyride-tooltip-width: (15em, 20em, 20em);

@import '../../node_modules/react-joyride/lib/react-joyride';

#tour {
    position: absolute;
    display: inline;
    bottom: 1em;
    right: 1em;
}

.tour-first-pop-up {
    .joyride-tooltip {
        position: fixed !important;
    }
}

.tour-custom-buttons {
    text-align: right;
    margin-top: 1em;
    button: {
        margin-left: 0.1em;
    }
}

.joyride-tooltip__button {
    padding: 10px 25px;
    &--primary {
        color: $white;
        background-color: $brand-btn;
    }
    &--primary:hover {
        color: $white;
        background-color: $brand-btn-active;
    }
    &--secondary {
        color: $black;
        background-color: $brand-gray;
    }
    &--secondary:hover {
        background-color: #dedede;
    }
}
@import 'color';

$joyride-color: $brand-orange;
$joyride-button-bg-color: $brand-btn;
$joyride-tooltip-width: (15em, 20em, 20em);

@import '../../node_modules/react-joyride/lib/react-joyride';

#tour {
    position: absolute;
    display: inline;
    bottom: 1em;
    right: 1em;
}

.tour-first-pop-up {
    .joyride-tooltip {
        position: fixed !important;
        &__main {
            padding-bottom: 0;
        }
    }
}

.tour-custom-buttons {
    text-align: right;
    margin-top: 1em;
    button: {
        margin-left: 0.1em;
    }
}

.joyride-tooltip__button {
    padding: 10px 25px;
    &--primary {
        color: $white;
        background-color: $brand-btn;
    }
    &--primary:hover {
        color: $white;
        background-color: $brand-btn-active;
    }
    &--secondary {
        color: $black;
        background-color: $brand-gray;
    }
    &--secondary:hover {
        background-color: #dedede;
    }
}
Update spacing for first tooltip
Update spacing for first tooltip
