.burst{
.burst-today, .burst-goals {
  &-select {
    padding-inline: var(--rsp-spacing-l);
    padding-block: var(--rsp-spacing-m);
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: var(--rsp-spacing-s);

    &-item {
      border-radius: var(--rsp-border-radius-xs);
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      padding-block: var(--rsp-spacing-s);
      justify-items: center;
      flex-wrap: wrap;
      background: var(--rsp-white);

      &.active {
        box-shadow: inset 0 0 3px 2px var(--rsp-green-faded);
        border: 2px solid var(--rsp-green);
      }

      h2 {
        margin-top: var(--rsp-spacing-xxs);
        font-weight: 800;
      }

      span {
        display: flex;
        gap: 3px;
        justify-content: center;
        font-size: var(--rsp-fs-100);

        .burst-icon-live {
          animation-name: pulse;
          animation-duration: 1.5s;
          animation-timing-function: ease-in;
          animation-direction: alternate;
          animation-iteration-count: infinite;
          animation-play-state: running;

          @keyframes pulse {
            0% {
              transform: scale(0.9);
              opacity: 0.2;
            }

            100% {
              transform: scale(1.0);
              opacity: 1;
            }
          }
        }
      }
    }
  }

  &-list {
    width: 100%;

    &-item {
      width: 100%;
      display: grid;
      justify-items: flex-start;
      grid-template-columns: auto 1fr auto;
      gap: var(--rsp-spacing-s);
      padding-block: var(--rsp-spacing-xs);
      padding-inline: var(--rsp-spacing-l);

      &:nth-of-type(even) {
        background: var(--rsp-grey-200);
      }

      &-text {
        width: 100%;
        margin-right: auto;
      }

      &-number {
        font-weight: 600;
      }
    }
  }

  &-controls-flex {
    display: flex;
    //justify-content: space-between;
    align-items: center;
    gap: var(--rsp-spacing-xs);

    .burst-divider {
      width: 1px;
      height: 80%;
      background: var(--rsp-grey-500);
    }
  }
}

.burst-today {
  &-select {
    background: var(--rsp-green-faded);
  }
}

.burst-grid-item.burst-goals {
  position: relative;

  .burst-goals-select {
    background: var(--rsp-yellow-faded);
  }


  .information-overlay {
    background: rgba(47, 47, 47, 0.15);
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-direction: column;
    border-radius: var(--rsp-border-radius);

    &-container {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      background: var(--rsp-white);
      box-shadow: var(--rsp-box-shadow);

      padding: var(--rsp-spacing-s);
      padding-left: var(--rsp-spacing-m);
      padding-right: var(--rsp-spacing-m);
      border-radius: var(--rsp-border-radius-xs);
      margin: var(--rsp-spacing-s) 40px;

      /* animation */
      transform: scale(0);
      animation: scale-in 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s forwards;

      @keyframes scale-in {
        from {
          transform: scale(0);
          animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        to {
          transform: scale(1);
          animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
      }

      h4 {
        margin-bottom: var(--rsp-spacing-xs);
      }

      p {
        margin-bottom: var(--rsp-spacing-s);
      }
    }
  }
}

}