.DialogWrapper {
  position: fixed;
  background: none;
  border: 0;
  inset: 0;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-width: 100vw;
  overflow-y: auto;
  color: inherit;
}

.About.Dialog {
  width: $unit * 60;
  top: 0;
  transform: translate(-50%, 0);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-top: $unit-10x;
  section {
    margin-bottom: $unit;

    h2 {
      margin-bottom: $unit * 3;
    }
  }

  .DialogDescription {
    font-size: $font-regular;
    line-height: 1.24;
    margin-bottom: $unit;

    &:last-of-type {
      margin-bottom: 0;
    }
  }

  .Links {
    display: grid;
    gap: $unit;
    margin: $unit-2x 0;
  }

  div.LinkItem {
    margin-top: $unit-2x;
  }

  .LinkItem {
    $diameter: $unit-6x;
    border: 1px solid var(--link-item-bg);
    border-radius: $card-corner;

    &:hover {
      background-color: var(--link-item-bg);

      svg {
        fill: var(--link-item-image-color-hover);
      }
    }

    a {
      display: flex;
      padding: $unit-2x;

      &:hover {
        text-decoration: none;
      }

      .Left {
        align-items: center;
        display: flex;
        gap: $unit-2x;
        flex-grow: 1;
      }

      svg {
        fill: var(--link-item-image-color);
        width: $diameter;
        height: auto;

        &.ShareIcon {
          width: $unit-4x;
        }
      }
    }

    h3 {
      font-weight: $bold;
    }
  }
}

.ScrollingOverlay {
  background: rgba(0 0 0 / 0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  overflow-y: auto;
  z-index: 40;
}