alexkurowski_solo-toolkit/styles.css

.srt-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;

  .srt-tab-picker {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap-reverse;
    gap: var(--size-4-4);
    width: 100%;
    padding-top: var(--size-4-4);
    margin-top: var(--size-4-4);
    border-top: 1px solid var(--color-base-40);

    .srt-tab-picker-tabs {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
      gap: var(--size-4-2);

      .clickable-icon {
        transition:
          color 0.3s,
          background 0.3s;

        &.highlight {
          color: var(--text-on-accent);
          background: var(--interactive-accent);
        }
      }
    }
  }

  .srt-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: var(--size-4-4);
    width: 100%;
    overflow: hidden;
  }

  .dice-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--size-4-2);
    width: 100%;

    .dice-variant {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-end;
      gap: var(--size-4-2);

      .clickable-icon {
        padding: var(--size-4-1);

        svg {
          width: 28px;
          height: 28px;
        }
      }
    }

    .dice-results {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-end;
    }

    .dice-result-value {
      min-width: 32px;
      text-align: center;
    }
  }

  .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 {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: var(--size-4-2);
      transition: opacity 0.3s ease-in-out;

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

      &:not(.shown) {
        opacity: 0;
      }
    }

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

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

  .word-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--size-4-4);
  }

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

    .word-result {
      display: flex;
      flex-direction: row;
      transition: opacity 0.3s ease-in-out;
    }

    .word-result:not(.shown) {
      opacity: 0;
    }

    .word-result-type {
      display: inline-block;
      min-width: 60px;
      font-size: 0.75em;
      line-height: 2em;
      color: var(--color-base-60);
      text-align: right;
      margin-right: var(--size-4-4);
    }
  }

  &.srt-desktop-layout {
    flex-direction: column-reverse;
    justify-content: flex-start;

    .srt-tab-picker {
      margin-top: 0;
      padding-top: 0;
      padding-bottom: var(--size-4-4);
      margin-bottom: var(--size-4-4);
      border-top: none;
      border-bottom: 1px solid var(--color-base-40);
    }

    .srt-tab {
      justify-content: flex-start;
      width: 100%;
    }

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

    .word-results {
      flex-direction: column-reverse;
      margin-bottom: var(--size-4-6);
    }
  }

  &.srt-mobile-layout {
    .srt-tab-picker {
      .clickable-icon {
        padding: var(--size-4-2) var(--size-4-4);

        svg {
          width: 30px;
          height: 30px;
        }
      }

      .srt-tab-picker-tabs {
        gap: var(--size-4-4);
      }
    }

    .dice-buttons {
      .dice-variant {
        .clickable-icon {
          padding: var(--size-4-3);

          svg {
            width: 36px;
            height: 36px;
          }
        }
      }
    }

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