projects/ngclient/src/app/restore-flow/restore-destination/restore-destination.component.scss
@use '@ship-ui/core/styles/helpers' as *;

:host {
  display: block;
  width: 100%;
  max-width: p2r(520);
  padding: p2r(40);
}

header {
  display: flex;
  flex-direction: column;
  gap: p2r(8);

  h2,
  sh-alert {
    width: 100%;
  }

  h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: p2r(8);
  }

  p {
    span {
      cursor: pointer;
      text-decoration: underline;
    }
  }

  .actions {
    display: flex;
    gap: p2r(8);
  }
}

pre {
  white-space: pre-wrap;
}

.field-row {
  display: grid;
  align-items: flex-end;
  grid-template-columns: 1fr p2r(40);
  gap: p2r(8);

  &.single-field {
    display: block;
  }
}

form {
  display: flex;
  flex-direction: column;
  gap: p2r(24);
}

.form-actions {
  display: flex;
  justify-content: space-between;
}

.clickable {
  cursor: pointer;
  color: var(--primary-8);
}

.most-common-destinations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: p2r(16);

  .tile {
    display: flex;
    flex-direction: column;
    gap: p2r(8);
    padding: p2r(16);
    border: 1px solid var(--base-4);
    border-radius: var(--shape-3);
    box-shadow: var(--box-shadow-10);
    background-color: var(--base-2);
    cursor: pointer;

    h3 {
      font: var(--paragraph-10);
      margin: 0;
    }
  }
}

[prefix].link {
  cursor: pointer;
  text-decoration: underline;
  color: var(--primary-8);
}

textarea ~ grammarly-extension {
  display: none;
}
