alexkurowski_solo-toolkit/src/styles/deck.css

.srt-container {
  .deck-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--size-4-4);
    white-space: nowrap;

    .deck-size {
      min-width: 50px;
      line-height: var(--input-height);
      text-align: right;
    }
  }

  .deck-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: var(--size-4-4);
    width: 100%;
    overflow: hidden;

    .deck-result {
      flex-grow: 0;
      flex-shrink: 0;
      width: 76px;
      height: 104px;
      padding: var(--size-4-1) var(--size-4-2);
      background: #fcfcfc;
      border-radius: var(--radius-m);
      border: var(--size-2-1) solid #fcfcfc;
      cursor: pointer;
      transition: border-color 0.3s ease-in-out;
      animation: 0.5s ease-in-out srt-fadein;

      &:hover {
        border-color: var(--interactive-accent);
      }

      .deck-result-content {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        font-weight: 500;

        &.deck-result-red {
          color: var(--color-red);
        }

        &.deck-result-black {
          color: #212121;
        }
      }
    }

    .deck-result-value {
      display: inline-block;
      text-align: right;
    }

    .deck-result-type {
      position: relative;
      top: 1px;
    }
  }

  &.srt-desktop-layout {
    .deck-results {
      flex-direction: column-reverse;
      margin-bottom: var(--size-4-6);
    }
  }

  &.srt-mobile-layout {
    .deck-buttons {
      .deck-size {
        padding-left: var(--size-4-5);
      }
    }
  }
}