.story__share-btn {
  display: flex;
  align-items: center;
  gap: 0.5em;

  background-color: #f5f5f5;
  padding: 0.5em 2.5em;

  transition: background-color 0.3s ease;

  &:hover {
    background-color: #dbdbdd;
  }
}

#story__share-dialog {
  min-width: min(33.75em, 90%);

  &::backdrop {
    background-color: #f5f5f590;
  }

  .story__share-close {
    position: absolute;
    top: 0.5em;
    right: 0.5em;

    padding: 0.3em;

    background-color: transparent;
  }

  .inner-content {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;

    padding-block: 3em 3.5em;

    .fake-heading {
      font-family: "Noto Sans Condensed", sans-serif;
      font-size: 1.125em;
      font-weight: 700;
      line-height: 130%;
    }

    ul {
      list-style: none;
      padding: 0;

      margin-block-start: 1.88em;
      margin-block-end: 0;

      display: flex;
      gap: 2.25em;

      li {
        path {
          transition: fill ease 0.3s;
        }

        &:hover {
          path {
            fill: #dbdbdb;
          }
        }
      }
    }
  }
}