@use '@nu-art/ts-styles' as styles;

.ts-await-modules {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  &.ts-progress-bar {
    .ts-progress-bar__radial-bar {
      width: 100%;
      height: 100%;

      .ts-progress-bar__radial-bar__text {
        font-size: 42px;
        color: styles.dark-blue(4);
      }

      .ts-progress-bar__radial-bar__bar circle {
        stroke-width: 1px;

        &.ts-progress-bar__radial-bar__bar-child-0 {
          stroke: styles.dark-blue(6);
        }

        &.ts-progress-bar__radial-bar__bar-child-1 {
          stroke: styles.dark-blue(4);
        }

        &.ts-progress-bar__radial-bar__bar__background {
          stroke: #E3E9F2;
        }
      }
    }
  }

  .missing-permission-modules {
    width: min-content;

    h1 {
      font: {
        size: 24px;
        weight: 600;
      }
    }

    .ll_h_c {
      gap: 10px;
      flex-wrap: wrap;
    }
  }
}