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

:host {
  display: block;
}

.content {
  display: flex;
  flex-direction: column;
  padding: p2r(0 32 32);
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: p2r(32 0);
  background: var(--base-1);
  border-bottom: 1px solid var(--base-4);

  .title {
    display: flex;
    flex-direction: column;
    gap: p2r(4);
  }
}

section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: p2r(16);
  padding: p2r(32 0);
  border-top: 1px solid var(--base-4);

  &:first-of-type {
    border-top: 0;
  }

  .left {
    display: flex;
    flex-direction: column;
    gap: p2r(4);
    align-items: flex-start;

    sh-button-group {
      margin-top: p2r(4);
    }

    p {
      text-wrap: balance;
      width: 50%;
    }
  }
}

.passphrase-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: p2r(16);

  .actions {
    display: flex;
    align-items: center;
    gap: p2r(8);
  }
}

.remote-access-form {
  display: flex;
  flex-direction: column;
  gap: p2r(16);
}

.themes {
  display: flex;
  gap: p2r(8);

  img {
    max-width: p2r(240);
    border-radius: var(--shape-3);
    cursor: pointer;

    &.active {
      border: 2px solid var(--primary-8);
    }
  }
}

.radios {
  display: flex;
  flex-direction: column;
  gap: p2r(16);
}

.radio-option {
  cursor: pointer;

  sh-radio {
    color: var(--base-8);
    margin-bottom: p2r(4);
  }

  p {
    text-wrap: balance;
    color: var(--base-9);
  }
}

.field-col {
  display: flex;
  flex-direction: column;
  gap: p2r(8);
}

.field-row {
  display: flex;
  gap: p2r(8);
  width: 100%;

  sh-form-field,
  sh-select {
    flex: 1 0;
  }
}

.advanced-settings {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: p2r(16);
}
