@import 'src/styles/master';

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: space(10);

  .title {
    display: flex;
    align-items: center;
  }

  .barContainer {
    height: space(13);

    .bar {
      width: 100%;
      height: space(2.2);
      background: $alphaWhite20;
      border-radius: $borderRadiusM;
      position: relative;

      .fill {
        left: 0;
        height: 100%;
        background: $colorSecondaryHighlight;
        border-radius: $borderRadiusM;
        position: absolute;
        transition: right 1s ease-in-out;
        @include glowXS;
      }

      .marks {
        position: absolute;
        width: calc(100% - 6px);
        left: 3px;

        .mark {
          position: absolute;
          width: space(1.5);
          height: space(1.5);
          background: $alphaWhite60;
          border-radius: 50%;
          top: space(7);
          transform: translateX(-50%);

          .label {
            width: min-content;
            transform: translateX(-30%);
            margin-top: space(3);
            word-break: initial;
          }
        }
      }
    }
  }
}
