@use "../abstract" as *;
.list {
  --p-list-text-color: var(--color-neutral-60);
  color: hsl(var(--p-list-text-color));

  display:flex; flex-direction:column; gap:pxToRem(24); font-size:pxToRem(16);

  &-item {
    display:flex; align-items:baseline; gap:pxToRem(20);
    > * { vertical-align:middle; }
    [class*="icon"] { line-height:1; }
    .text { align-self:center; line-height:1.5; }
  }

  .icon-check {
    flex-shrink:0; display:inline-grid; place-content:center;
    inline-size:pxToRem(24); block-size:pxToRem(24);
    color:hsl(var(--color-neutral-0)); font-size:pxToRem(14);
    background-color:hsl(var(--color-primary-100)); border-radius:50%;
  }

  #{$theme-dark} & {
    --p-list-text-color: var(--color-neutral-20);
  }
}

.un-order-list {
  display:flex; flex-direction:column;
  list-style-type:disc; line-height:1.8;
  padding-inline-start:pxToRem(16);
  > *::marker { all:revert; }
}

.numeric-list {
  --p-numeric-border-color: var(--color-neutral-10);
  --p-numeric-bg-color:     var(--color-neutral-5);
  --p-numeric-text-color:   var(--color-neutral-60);
  counter-reset: number;
  display:grid; row-gap:pxToRem(24);
  &-item {
    counter-increment: number;
    display:flex; align-items:baseline; column-gap:pxToRem(24);
    &::before {
      content: counter(number); flex-shrink:0;
      display:grid; place-content:center; inline-size:pxToRem(32); block-size:pxToRem(32);
      background-color:hsl(var(--p-numeric-bg-color)); color:hsl(var(--p-numeric-text-color));
      border:solid pxToRem(1) hsl(var(--p-numeric-border-color));
      border-radius:var(--border-radius-circular);
    }
  }
  #{$theme-dark} & {
    --p-numeric-border-color: var(--color-neutral-80);
    --p-numeric-bg-color:     var(--color-neutral-85);
    --p-numeric-text-color:   var(--color-neutral-20);
  }
}

.order-list {
  counter-reset: number;
  display:flex; flex-direction:column; gap:pxToRem(32);

  &-item {
    counter-increment: number;
    display:flex; flex-direction:column; flex-wrap:wrap; gap:pxToRem(16);
  }
  &-content {
    display:flex; gap:pxToRem(16);
    &::before { content:counter(number); }
    &.is-hide-number::before { opacity:0; }
  }
}