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

:host {
  display: block;
}

h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

section {
  display: flex;
  flex-direction: column;
  gap: p2r(32);
  padding: p2r(32 0);
}

header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: p2r(0 32);
  gap: p2r(16);
}

sh-card {
  display: flex;
  align-items: center;
  gap: p2r(16);

  .text {
    flex: 1 0;
    display: flex;
    flex-direction: column;
    gap: p2r(4);
  }
}

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

  h2 {
    padding: p2r(0 32);
  }
}

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

.backup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: p2r(32);
  gap: p2r(16);
  border: 1px solid var(--base-4);
  border-radius: var(--shape-3);
  box-shadow: var(--box-shadow-10);

  .text {
    display: flex;
    flex-direction: column;
    gap: p2r(8);
    width: 100%;
    max-width: 40%;

    h3 {
      display: flex;
      align-items: center;
      gap: p2r(8);

      sh-icon {
        color: var(--base-8);
      }
    }

    p {
      font: var(--paragraph-30);
      color: var(--base-8);

      span {
        color: var(--base-12);
      }
    }
  }

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

.provider-icon {
  width: p2r(20);
  height: p2r(20);
}

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

.sortable {
  user-select: none;

  sh-icon {
    margin-left: p2r(8);
    font-size: p2r(16);
    justify-self: flex-end;
    display: none;
  }

  &:not(.sort-asc):not(.sort-desc) sh-icon.filter {
    display: block;
  }

  &.sort-asc sh-icon.asc {
    display: block;
    color: var(--base-12);
  }

  &.sort-desc sh-icon.desc {
    display: block;
    color: var(--base-12);
  }
}

.actionable {
  cursor: pointer;

  &:after {
    transition: inset 100ms linear;
  }

  &:hover {
    --card-shp: 0;
  }
}
