.tour-share,
.tour-share * {
    box-sizing: border-box;
}

.tour-share {
    position: relative;
    width: fit-content;
    padding: 0px;
    background: var(--color-tertiary);
    color: var(--color-black);
    font-family: var(--font-family-primary);
}

.tour-share__trigger {
    display: inline-flex;
    max-width: 100%;
    padding: 0;
    align-items: center;
    gap: 18px;
    background: transparent;
    border: 0;
    color: var(--color-secondary);
    cursor: pointer;
    font-family: var(--font-family-buttons);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-h3);
    line-height: 1.2;
    text-align: left;
    transition:
        color 180ms ease,
        transform 180ms ease;
}

.tour-share__trigger:hover {
    color: var(--color-secondary-hover);
    transform: translateY(-1px);
}

.tour-share__trigger:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 6px;
}

.tour-share__trigger-icon {
    flex: 0 0 auto;
    font-size: 22px;
}

.tour-share__trigger-label {
    color: inherit;
}

.tour-share__menu {
    position: absolute;
    z-index: 30;
    top: calc(100% - 14px);
    left: 32px;
    display: grid;
    width: min(320px, calc(100% - 64px));
    padding: 8px;
    background: var(--color-white);
    border: 1px solid color-mix(in srgb, var(--color-primary-dark) 16%, transparent);
    border-radius: 14px;
    box-shadow: 0 18px 44px color-mix(in srgb, var(--color-primary-dark) 18%, transparent);
    top: 40px;
}

.tour-share__menu[hidden] {
    display: none;
}

.tour-share__option {
    display: flex;
    min-height: 48px;
    padding: 10px 12px;
    align-items: center;
    gap: 12px;
    border-radius: 9px;
    color: var(--color-black);
    font-family: var(--font-family-buttons);
    font-size: var(--font-size-a);
    font-weight: var(--font-weight-a);
    line-height: var(--line-height-p-s);
    text-decoration: none;
    transition:
        background-color 160ms ease,
        color 160ms ease;
}

.tour-share__option i {
    width: 24px;
    color: var(--color-primary);
    font-size: 22px;
    text-align: center;
}

.tour-share__option:hover,
.tour-share__option:focus-visible {
    background: var(--color-tertiary);
    color: var(--color-primary-hover);
}

.tour-share__option:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: -2px;
}

span.tour-share__trigger-label {
    color: var(--color-secondary) !important;
    font-weight: 700 !important;
}

button.tour-share__trigger {
    padding: 5px 10px;
}

button.tour-share__trigger:hover,
button.tour-share__trigger:active,
button.tour-share__trigger:focus {
    background: var(--color-secondary) !important;
    color: var(--color-white) !important;
    padding: 5px 10px;
}

button.tour-share__trigger:hover span,
button.tour-share__trigger:hover i,
button.tour-share__trigger:active span,
button.tour-share__trigger:active i,
button.tour-share__trigger:focus span,
button.tour-share__trigger:focus i {
    color: var(--color-white) !important;
}

@media (max-width: 767px) {
    .tour-share {
        padding: 20px;
    }

    .tour-share__trigger {
        gap: 14px;
        font-size: var(--font-size-h4);
    }

    .tour-share__trigger-icon {
        font-size: 32px;
    }

    .tour-share__menu {
        right: 20px;
        left: 20px;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {

    .tour-share__trigger,
    .tour-share__option {
        transition: none;
    }
}