blitzkit/packages/website-ue/src/components/TankopediaLoadout/index.module.css

.section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);

  .header {
    display: flex;
    align-items: center;
    gap: var(--space-3);

    .upgrade-buttons {
      display: flex;
    }
  }

  .consumables {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);

    .consumable {
      font-size: var(--space-5);

      img {
        width: 1em;
        height: 1em;
      }

      .info {
        display: flex;
        flex-direction: column;

        .entry {
          display: flex;
          gap: var(--space-2);

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

  .equipment {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);

    .row {
      display: flex;
      gap: var(--space-3);

      .slots {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        align-items: center;

        .options {
          display: flex;

          .slot {
            aspect-ratio: 1 / 1;
            padding: var(--space-3);

            font-size: var(--space-5);

            &[data-selected="true"] {
              z-index: 1;
            }
          }
        }
      }
    }
  }

  .lines {
    display: flex;
    flex-direction: column;

    gap: var(--space-3);

    .line {
      display: flex;

      gap: var(--space-3);

      .chunks-wrapper {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);

        .line-wrap {
          display: flex;
          align-items: center;

          gap: var(--space-3);

          .wrap-marker {
            padding-bottom: var(--font-size-minor);

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

          .wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-2);

            .stage {
              position: relative;

              padding: var(--space-3);

              font-size: 2em;

              .icon {
                width: 1em;
                height: 1em;

                transform: translate(var(--space-1), var(--space-1));
              }

              .tier {
                position: absolute;
                left: var(--space-2);
                top: var(--space-2);
              }

              .price {
                position: absolute;
                left: 50%;
                bottom: var(--space-2);
                transform: translateX(-50%);
              }
            }
          }
        }
      }
    }
  }
}