hensei-web/components/reps/GridRep/index.module.scss

.gridRep {
  aspect-ratio: 3/2;
  border: 1px solid transparent;
  border-radius: $card-corner;
  box-sizing: border-box;
  min-width: 320px;
  position: relative;
  width: 100%;
  opacity: 1;

  @include breakpoint(phone) {
    padding-bottom: $unit-2x;
  }

  &.visible {
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
  }

  &.hidden {
    opacity: 0;
    transition: opacity 0.12s ease-in-out;
  }

  &:hover {
    background: var(--grid-rep-hover);
    border: 1px solid rgba(0, 0, 0, 0.1);

    a {
      text-decoration: none;
    }

    .indicators {
      opacity: 1;
    }

    .weaponGrid {
      cursor: pointer;

      .weapon {
        background: var(--unit-bg-hover);
      }
    }

    @include breakpoint(phone) {
      background: inherit;

      .Grid .Weapon {
        box-shadow: none;
      }
    }
  }

  a {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-gap: 8px;
    gap: 8px;
    padding: $unit-2x $unit-2x 0 $unit-2x;
  }

  button {
    position: absolute;
    z-index: 2;
    right: $unit-2x;
    top: $unit-2x;
    width: 44px;
  }

  .gridContainer {
    aspect-ratio: 2.1/1;
    width: 100%;
  }

  .characterGrid {
    aspect-ratio: 2.1/1;
    display: flex;
    justify-content: space-between;

    .protagonist {
      border-width: 1px;
      border-style: solid;

      &.fire {
        background: var(--fire-portrait-bg);
        border-color: var(--fire-bg);
      }

      &.water {
        background: var(--water-portrait-bg);
        border-color: var(--water-bg);
      }

      &.wind {
        background: var(--wind-portrait-bg);
        border-color: var(--wind-bg);
      }

      &.earth {
        background: var(--earth-portrait-bg);
        border-color: var(--earth-bg);
      }

      &.light {
        background: var(--light-portrait-bg);
        border-color: var(--light-bg);
      }

      &.dark {
        background: var(--dark-portrait-bg);
        border-color: var(--dark-bg);
      }

      &.empty {
        background: var(--card-bg);
      }
    }

    .grid {
      background: var(--background);
      border-radius: $item-corner-small;
      aspect-ratio: 69/142;
      list-style: none;
      height: calc(100% - $unit);

      img {
        border-radius: $item-corner-small;
        width: 100%;
      }
    }
  }

  .weaponGrid {
    aspect-ratio: 3.25/1;
    display: grid;
    grid-template-columns: 1fr 3.55fr; /* left column takes up 1 fraction, right column takes up 3 fractions */
    grid-gap: $unit; /* add a gap of 8px between grid items */

    .weapon {
      background: var(--unit-bg);
      border-radius: $item-corner-small;
    }

    .mainhand.weapon {
      aspect-ratio: 73/153;
      display: grid;
      grid-column: 1 / 2; /* spans one column */
      height: 100%;
    }

    .weapons {
      display: grid; /* make the right-images container a grid */
      grid-template-columns: repeat(
        3,
        1fr
      ); /* create 3 columns, each taking up 1 fraction */
      grid-template-rows: repeat(
        3,
        1fr
      ); /* create 3 rows, each taking up 1 fraction */
      gap: $unit;
      // column-gap: $unit;
      // row-gap: $unit-2x;
    }

    .grid.weapon {
      aspect-ratio: 280 / 160;
      display: grid;
    }

    .mainhand.weapon img[src*='jpg'],
    .grid.weapon img[src*='jpg'] {
      border-radius: 4px;
      width: 100%;
    }
  }

  .summonGrid {
    aspect-ratio: 2/0.91;
    display: flex;
    gap: $unit;
    justify-content: space-between;

    .summon,
    .mainSummon {
      background: var(--background);
      border-radius: $item-corner-small;

      img {
        border-radius: $item-corner-small;
        width: 100%;
      }
    }

    .mainSummon {
      aspect-ratio: 56/97;
      display: grid;
      grid-column: 1 / 2; /* spans one column */
    }

    .summons {
      display: grid; /* make the right-images container a grid */
      grid-template-columns: repeat(
        2,
        1fr
      ); /* create 3 columns, each taking up 1 fraction */
      grid-template-rows: repeat(
        2,
        1fr
      ); /* create 3 rows, each taking up 1 fraction */
      gap: $unit;
      aspect-ratio: 83/100;
      // column-gap: $unit;
      // row-gap: $unit-2x;
    }

    .summon {
      aspect-ratio: 184 / 138;
      display: grid;
    }
  }

  .details {
    display: flex;
    flex-direction: column;
    gap: $unit;

    .buttonArea {
      display: flex;
      flex-direction: row;
      gap: $unit;
      justify-content: center;
    }

    h2 {
      color: var(--text-primary);
      font-size: $font-regular;
      font-weight: $bold;
      overflow: hidden;
      padding-bottom: 1px;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-height: 24px;
      max-width: 258px; // Can we not do this?

      &.empty {
        color: var(--text-tertiary);
      }
    }

    .top {
      display: flex;
      flex-direction: row;
      gap: calc($unit / 2);
      align-items: center;

      .info {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        gap: calc($unit / 2);
        max-width: calc(100% - 44px - $unit);
      }

      .iconWrapper {
        width: $unit-5x;
        height: $unit-5x;
        display: flex;
        align-items: center;
        justify-content: center;

        .icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: $unit * 2.5;
          height: $unit * 2.5;

          svg {
            fill: var(--text-tertiary);
          }
        }
      }

      button svg {
        width: 14px;
        height: 14px;
      }
    }

    .attributed,
    .bottom {
      display: flex;
      gap: $unit-half;
      justify-content: space-between;

      a.user:hover {
        color: var(--link-text-hover);
      }
    }

    .bottom {
      flex-direction: column;
    }

    .user {
      flex-grow: 1;
    }

    .user,
    .raid,
    time {
      color: var(--text-tertiary);
      font-size: $font-small;
    }

    time {
      line-height: 18px;
      white-space: nowrap;
    }

    .properties {
      display: flex;
      font-size: $font-small;
      gap: $unit-half;

      .raid {
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .auto {
        flex: 1;
        display: inline-flex;
        gap: $unit-half;
        flex-direction: row;
        flex-wrap: nowrap;
      }

      .fullAuto {
        color: var(--full-auto-label-text);
        white-space: nowrap;
      }

      .extra {
        color: var(--extra-purple-light-text);
        white-space: nowrap;
      }

      .autoGuard {
        display: inline-block;
        width: 12px;
        height: 12px;

        svg {
          fill: var(--full-auto-label-text);
        }
      }
    }

    .raid {
      color: var(--text-primary);

      &.empty {
        color: var(--text-tertiary);
      }
    }

    .user {
      display: flex;
      gap: calc($unit / 2);
      align-items: center;

      img,
      .no-user {
        $diameter: 18px;

        border-radius: calc($diameter / 2);
        height: $diameter;
        width: $diameter;
      }

      img.gran {
        background-color: #cee7fe;
      }

      img.djeeta {
        background-color: #ffe1fe;
      }

      .no-user {
        background: $grey-80;
      }
    }
  }

  .indicators {
    display: flex;
    flex-direction: row;
    gap: $unit;
    margin-top: $unit * -1;
    margin-bottom: $unit-fourth;
    justify-content: center;
    opacity: 0;

    @include breakpoint(phone) {
      display: none;
    }

    li {
      flex-grow: 1;
      text-indent: -9999px;
      padding: $unit 0;

      .indicator {
        transition: background-color 0.12s ease-in-out;
        height: $unit;
        border-radius: $unit-half;
        background-color: var(--button-contained-bg-hover);
      }

      span {
        text-indent: -9999px;
        position: absolute;
      }

      &:hover .indicator,
      &.active .indicator {
        background-color: var(--text-secondary);
      }
    }
  }
}