@layer variables, root, userdatalist, utilities;

@import url("https://unpkg.com/open-props");
@import url("https://unpkg.com/modern-css-reset@1.4.0/dist/reset.min.css");

@layer userdatalist {
  .user-datalist-wrapper {
    container-type: inline-size;
    resize: both;
    overflow: scroll;
    border: 0.25rem solid darkcyan;
  }

  .user-datalist {
    outline: 1px solid var(--stone-4);
    inline-size: 100%;

    @container (max-width: 750px) {
      display: block;
      outline-color: transparent;
    }

    thead {
      text-align: left;

      @container (max-width: 750px) {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
      }

      th {
        padding-block: calc(var(--spacer) / 4);
      }
    }

    tbody {
      @container (max-width: 750px) {
        display: grid;
        grid-template-columns: repeat(
          auto-fill,
          minmax(calc(var(--spacer) * 13), 1fr)
        );
        gap: var(--spacer);
      }

      tr {
        padding: 0;
        vertical-align: middle;
        background-color: var(--stone-0);
        border: 1px solid transparent;

        @container (max-width: 749px) {
          display: grid;
          grid-template:
            "full-name thumbnail" auto
            "date-of-birth thumbnail" auto
            "phone thumbnail" auto
            "email actions" auto / auto calc(var(--spacer) * 3);
          padding-inline-start: var(--spacer);
          border-color: var(--stone-4);
        }

        &:nth-child(odd) {
          @container (min-width: 750px) {
            background-color: var(--stone-2);
          }
        }

        &:is(:focus-within, :has(td:hover)) {
          background-color: var(--indigo-1);
        }

        &:is(:focus-within) {
          outline: var(--outline-size) solid var(--outline-color);
          outline-offset: calc(var(--outline-size) * -1);
        }

        & :where(td) {
          padding: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: var(--font-lineheight-1);

          &:last-child {
            padding-inline-end: calc(var(--spacer) / 2);
          }

          @container (max-width: 749px) {
            padding: calc(var(--spacer) / 8);
            vertical-align: middle;
            cursor: pointer;
            white-space: nowrap;

            &:first-child {
              padding-inline-start: 0;
              padding-block: 0;
            }

            &:last-child {
              text-align: center;
              padding-inline-end: calc(var(--spacer) / 1.5);
            }
          }
        }
      }
    }
  }

  :where(.user-datalist
      td:not(.user-dataitem__thumbnail, .user-dataitem__actions)) {
    @container (max-width: 749px) {
      margin-block: calc(var(--size-1) / 2);
    }
  }

  .user-dataitem__thumbnail {
    grid-area: thumbnail;

    @container (max-width: 749px) {
      background-color: var(--stone-3);
    }
  }

  .user-dataitem__image {
    inline-size: 100%;

    @container (min-width: 750px) {
      max-inline-size: none;
      inline-size: calc(var(--spacer) * 2);
      block-size: calc(var(--spacer) * 2);
    }
  }

  td.user-dataitem__full-name {
    grid-area: full-name;

    @container (max-width: 749px) {
      margin-block-start: var(--spacer);
      font-size: var(--size-5);
      font-weight: 900;
      line-height: var(--font-lineheight-0);
    }
  }

  .user-dataitem__email {
    grid-area: email;
    margin-block-end: var(--spacer);
  }

  .user-dataitem__date-of-birth {
    grid-area: date-of-birth;

    @container (max-width: 749px) {
      font-size: var(--font-size-0);
      margin-block-end: calc(var(--size-1));
      color: var(--stone-8);
    }
  }

  .user-dataitem__phone {
    grid-area: phone;
  }

  .user-dataitem__actions {
    text-align: center;

    @container (max-width: 749px) {
      grid-area: actions;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: var(--stone-3);

      &:has(tr:hover) {
        background-color: var(--indigo-3);
      }
    }
  }

  .user-dataitem__action--detail {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    outline: none;
  }
}

@layer variables {
  /* Variables */
  :root {
    --brand-primary: var(--indigo-8);

    --spacer: clamp(1.5rem, 3vw, 2rem);
    --container-spacer: clamp(1rem, 6vw, 4.5rem);
    --shadow-strength: 2.5%;

    --outline-size: 0.125rem;
    --outline-color: var(--indigo-6);
    --outline-offset: 0.25rem;
  }
}

@layer root {
  :root {
    font-size: clamp(15px, 1.5vw, 18px);
  }

  body {
    font-family: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans",
      Arial, sans-serif;
    font-size: 1rem;

    background-color: var(--stone-1);
    color: var(--stone-10);
    padding: var(--size-6);

    display: flex;
    flex-direction: column;
    gap: var(--size-6);
  }

  a {
    color: var(--stone-10);
    text-decoration: underline;
  }

  svg {
    width: 1.5em;
    height: 1.5em;
  }

  /* 
 * Outline color 
 */
  a,
  button {
    &:focus-visible {
      outline-color: var(--outline-color);
      outline-offset: var(--outline-offset);
    }
  }

  table {
    border-collapse: collapse;
  }
}

@layer utilities {
  .visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}