/*
  todo: update once component is done
  todo: change padding method when the expectation is row based
*/

shwt-widget-grid {
  display: flex;
  height: inherit;
  overflow: hidden;
  width: inherit;
}

.grid {
  --_column-count: var(--column-count, 2);
  --_grid-padding: var(--grid-padding, 0);
  --_border: var(--image-border, none);
  --_border-radius: var(--image-border-radius, 0);
  --_row-count: var(--row-count, 1);

  flex: 1;

  &.column-orientation {
    padding: calc(var(--_grid-padding) * var(--tr-ratio));
    column-gap: calc(var(--_grid-padding) * var(--tr-ratio));

    grid-template-columns: repeat(var(--_column-count, 1), minmax(0, 1fr));
    grid-template-rows: 1fr;
  }

  &.row-orientation {
    padding: 0;
    max-height: 100%;

    --row-pad: calc((var(--_row-count) - 1) * var(--_grid-padding));
    --track-height: calc(((var(--height) - var(--row-pad)) / var(--_row-count)));
    column-gap: calc(var(--_grid-padding) * var(--tr-ratio));

    &.align-right {
      justify-content: end;
    }

    &.align-center {
      justify-content: center;
    }

    &.align-left,
    &.overflow {
      justify-content: start;
    }

    &.auto-gap {
      justify-content: space-between;
    }

    &.overflow {
      display: flex;

      &>* {
        /* this can change if we ever inject an aspect ratio. Could be from the renderer through a variable or something. */
        aspect-ratio: 1;
      }
    }

    &.align-center,
    &.align-left,
    &.align-right,
    &.auto-gap {
      grid-template-rows: repeat(var(--_row-count), 1fr);
      row-gap: calc(var(--_grid-padding) * var(--tr-ratio));
      /* test with multiline */
      grid-template-columns: repeat(auto-fit, calc(var(--track-height) * var(--tr-ratio)));
    }

    /* force images to be square */
    & img {
      aspect-ratio: 1 / 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  display: grid;

  & .column {
    align-self: start;
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--_grid-padding) * var(--tr-ratio));

    &.level {
      height: 100%;
      justify-content: stretch;

      & img:last-of-type {
        aspect-ratio: unset !important;
        height: -webkit-fill-available;
      }
    }

    & img {
      object-fit: cover;
      transition-duration: 0.4s;
      transition-property: opacity;
      opacity: 1;
      border: var(--_border);
      border-radius: var(--_border-radius);
    }

    & img.shwt-loading {
      opacity: 0;
    }
  }
}