.share-controls {
    max-width: 470px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.share-controls__heading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px 11px;
}

.share-controls__heading h2 {
    margin: 0;
    color: var(--ink);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.share-controls__heading p {
    margin: 0;
    color: var(--slate);
    font-size: .74rem;
}

.share-controls__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 11px;
}

.share-controls__actions button,
.share-controls__actions a {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: transparent;
    color: #40506b;
    font: inherit;
    font-size: .72rem;
    font-weight: 820;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.share-controls__actions button:hover,
.share-controls__actions button:focus-visible,
.share-controls__actions a:hover,
.share-controls__actions a:focus-visible {
    border-color: var(--teal-deep);
    color: var(--teal-deep);
    outline: none;
}

.share-controls__actions .share-controls__primary {
    border-color: var(--teal-deep);
    background: var(--teal-deep);
    color: var(--white);
}

.share-controls__actions .share-controls__primary:hover,
.share-controls__actions .share-controls__primary:focus-visible {
    border-color: var(--teal);
    background: var(--teal);
    color: var(--ink);
}

.share-controls__status {
    min-height: 1.2em;
    margin: 9px 0 0;
    color: var(--slate);
    font-size: .71rem;
    font-weight: 700;
}

.theme-logo-dark .share-controls {
    border-color: #40474c;
}

.theme-logo-dark .share-controls__heading h2 {
    color: #e5e9eb;
}

.theme-logo-dark .share-controls__heading p,
.theme-logo-dark .share-controls__status {
    color: #aeb6bc;
}

.theme-logo-dark .share-controls__actions button,
.theme-logo-dark .share-controls__actions a {
    border-color: #454d52;
    color: #d6dce0;
}

.theme-logo-dark .share-controls__actions button:hover,
.theme-logo-dark .share-controls__actions button:focus-visible,
.theme-logo-dark .share-controls__actions a:hover,
.theme-logo-dark .share-controls__actions a:focus-visible {
    border-color: var(--teal);
    color: var(--teal);
}

.theme-logo-dark .share-controls__actions .share-controls__primary {
    border-color: var(--teal-deep);
    background: var(--teal-deep);
    color: #171a1c;
}

.theme-logo-dark .share-controls__actions .share-controls__primary:hover,
.theme-logo-dark .share-controls__actions .share-controls__primary:focus-visible {
    border-color: var(--teal);
    background: var(--teal);
    color: #171a1c;
}

@media (max-width: 460px) {
    .share-controls__heading {
        display: grid;
        gap: 5px;
    }

    .share-controls__actions button,
    .share-controls__actions a {
        flex: 1 1 calc(50% - 7px);
    }

    .share-controls__actions .share-controls__primary {
        flex-basis: 100%;
    }
}