.share-button>details {
  --color-overlay: var(--color-mask);
}

@media (min-width: 960px) {
  .share-button details[open]::before {
    display: none;
  }
}

.share-button__content {
  --modal-animation-name: animation-fade-in-center;
  --modal-animation-name-close: animation-fade-out-center;
  --input-height: 60px;

  z-index: var(--z-index-popover);
  position: fixed;
  inset: 0;
  width: 100%;
  min-width: 250px;
  margin-block-end: 0;
  padding: 24px 20px;
  color: rgb(var(--color-text));
}

@media (min-width: 960px) {
  .share-button__content {
    position: absolute;
    inset: unset;
    width: 100%;
    max-width: 500px;
    padding: 0;
    margin-block-start: 10px;
  }
}

.share-button__href {
  font-size: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.share-button__message:not(:empty):not(.hidden) {
  margin: 0;
  width: 100%;
  display: flex;
  align-items: center;
  height: var(--input-height);
  padding: 0 var(--input-padding-inline);
}

.share-button__message:not(:empty):not(.hidden)~input {
  display: none;
}

.share-button__copy,
.share-button__close {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 40px;
  height: 40px;
}