penpot/frontend/resources/styles/main/partials/share-link.scss

.share-modal {
  background: none;
  display: block;
  top: 50px;
  left: calc(100vw - 500px);

  .share-link-dialog {
    width: 480px;
    background-color: $color-white;
    box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 20%);

    .modal-content {
      padding: 16px 32px;
      &:first-child {
        border-top: 0px;
        padding: 0;
        height: 50px;
        display: flex;
        justify-content: center;
      }

      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        margin-left: 32px;
        h2 {
          font-size: $fs18;
          color: $color-black;
        }

        .modal-close-button {
          margin-right: 16px;
        }
      }

      .share-link-section {
        .custom-input {
          display: flex;
          flex-direction: row;
          margin-bottom: 15px;
          border: 1px solid $color-gray-20;
          input {
            padding: 0 0 0 15px;
            border: none;
          }
        }
        .hint-wrapper {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .hint {
            font-size: $fs12;
            color: $color-gray-40;
          }
          .confirm-dialog {
            display: flex;
            flex-direction: column;
            background-color: unset;
            .actions {
              display: flex;
              justify-content: flex-end;
              gap: 16px;
            }
            .description {
              font-size: $fs12;
              margin-bottom: 16px;
              color: $color-black;
            }
            .btn-primary,
            .btn-secondary,
            .btn-warning,
            .btn-danger {
              width: 126px;
              margin-bottom: 0px;

              &:not(:last-child) {
                margin-right: 10px;
              }
            }
          }
        }

        label {
          font-size: $fs12;
          color: $color-black;
        }

        .help-icon {
          height: 40px;
          width: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          position: relative;
          right: 0;
          top: 0;
          background-color: $color-gray-10;
          border-left: 1px solid $color-gray-20;
          svg {
            fill: $color-gray-30;
          }
          &:hover {
            background-color: $color-primary;
            svg {
              fill: $color-gray-60;
            }
          }
        }
        input {
          margin: 0;
        }
      }

      &.ops-section {
        .manage-permissions {
          display: flex;
          color: $color-primary-dark;
          font-size: $fs12;
          cursor: pointer;
          .icon {
            svg {
              height: 16px;
              width: 16px;
              fill: $color-primary-dark;
            }
          }
          .title {
            margin-left: 8px;
          }
        }
        .view-mode {
          min-height: 34px;
          .subtitle {
            height: 32px;
          }
          .row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .count-pages {
              font-size: $fs12;
              color: $color-gray-30;
            }
          }
          .current-tag {
            font-size: $fs12;
            color: $color-gray-30;
          }
          label {
            color: $color-black;
          }
        }
        .access-mode,
        .inspect-mode {
          display: grid;
          grid-template-columns: auto 1fr;
          .items {
            display: flex;
            justify-content: flex-end;
            align-items: center;
          }
        }
        .view-mode,
        .access-mode,
        .inspect-mode {
          margin: 8px 0;
          .subtitle {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            color: $color-black;
            font-size: $fs16;
            .icon {
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 10px;
              svg {
                height: 16px;
                width: 16px;
              }
            }
          }
          .items {
            .input-select {
              background-image: url("/images/icons/arrow-down.svg");
              margin: 0;
              padding-right: 28px;
              border: 1px solid $color-gray-10;
              max-width: 227px;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
            > .input-radio {
              display: flex;
              user-select: none;
              margin-top: 0;
              margin-bottom: 0;
              label {
                display: flex;
                align-items: center;
                color: $color-black;
                max-width: 115px;

                &::before {
                  height: 16px;
                  width: 16px;
                }
                .hint {
                  margin-left: 5px;
                  color: $color-gray-30;
                }
              }

              &.disabled {
                label {
                  color: $color-gray-30;
                }
              }
            }
          }
        }

        .pages-selection {
          border-top: 1px solid $color-gray-10;
          border-bottom: 1px solid $color-gray-10;
          padding-left: 20px;
          max-height: 200px;
          overflow-y: scroll;
          user-select: none;

          label {
            color: $color-black;
          }
        }
      }
    }
  }
}