#content .ruka-share-placement {
    display: block;
    margin: 0.55rem 0 1rem;
}

#content button.ruka-share-trigger {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: #fff;
    background: #345b43;
    border: 1px solid #345b43;
    border-radius: 50%;
}

#content .ruka-share-icon {
    width: 21px;
    height: 21px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 10.5 6.8-4m-6.8 7 6.8 4'/%3E%3C/svg%3E") center / contain no-repeat;
}

#content button.ruka-share-trigger:hover,
#content button.ruka-share-trigger:focus-visible {
    color: #fff;
    background: #254532;
}

.ruka-share-dialog {
    position: fixed;
    inset: 0;
    width: min(36rem, calc(100% - 2rem));
    max-height: calc(100% - 2rem);
    margin: auto;
    padding: clamp(1rem, 4vw, 1.75rem);
    overflow: auto;
    color: #202b22;
    background: #fff;
    border: 1px solid #d5e1d6;
    border-radius: 1rem;
    box-shadow: 0 16px 60px #1114;
}

.ruka-share-dialog::backdrop {
    background: #15221bb0;
}

.ruka-share-dialog h2 {
    margin: 0 2.5rem 0.75rem 0;
    font-size: 1.4rem;
}

.ruka-share-dialog .ruka-share-close {
    float: right;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 1.5rem;
}

.ruka-share-dialog [hidden] {
    display: none !important;
}

.ruka-share-dialog .ruka-share-status {
    margin: 0 0 0.65rem;
}

.ruka-share-dialog .ruka-share-status:empty {
    margin: 0;
}

.ruka-share-dialog .ruka-share-preview {
    box-sizing: border-box;
    width: 100%;
    max-height: 45dvh;
    color: #202b22;
    background: #f6f8f5;
    font: inherit;
    resize: vertical;
}

.ruka-share-dialog .ruka-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.ruka-share-dialog .ruka-share-actions > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.45rem 0.75rem;
    color: #fff;
    background: #345b43;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    font: inherit;
    text-decoration: none;
}

.ruka-share-dialog .ruka-share-actions > :hover {
    color: #fff;
    background: #254532;
}

.ruka-share-dialog .ruka-share-original {
    display: inline-block;
    margin-top: 0.65rem;
    text-decoration: underline;
}

#content .ruka-share-trigger:focus-visible,
.ruka-share-dialog :is(button, a, textarea):focus-visible {
    outline: 2px solid #345b43;
    outline-offset: 2px;
}