.ark-ui-storybook-table-header {
  .ark-ui-select-title {
    display: block;
  }

  .ark-ui-select-title {
    margin-bottom: 4px;
  }

  &:hover {
    background-color: transparent;
  }

  &:has(.ark-ui-select.is-opened) {
    background-color: transparent;
  }

  .ark-ui-select-arrow.table-icon-type-search {
    top: 12px;
    width: 24px;
    height: 24px;
  }
}

* {
  font-family: Roboto, sans-serif;
}

@keyframes firework {
  0% {
    transform: translateY(70vh);
    width: 5px;
    height: 5px;
    opacity: 1;
    box-shadow: 0 0 10px #fff;
  }
  50% {
    transform: translateY(20vh);
    width: 1px;
    height: 1px;
    opacity: 0.3;
    box-shadow: 0 0 10px #fff;
  }
  80% {
    transform: translateY(20vh);
    border-radius: 50%;
    border: 1px solid wheat;
    width: 1px;
    height: 3px;
    opacity: 1;
    box-shadow: custome-box-shadow(150);
  }
  100% {
    transform: translateY(30vh);
    width: 1px;
    height: 1px;
    opacity: 0;
    box-shadow: custome-box-shadow(150);
  }
}
@function custome-box-shadow($n) {
  $box-shadow: "";
  $shadows: null;
  @for $i from 1 through $n {
    @if ($i < ($n / 4)) {
      $shadows: -(random($i * 5)) + "px " + -(random($i * 7)) + "px red";
    } @else if ($i > ($n / 2) and $i < ($n * 3 / 4)) {
      $shadows: random($i * 2) + "px " + -(random($i)) + "px green";
    } @else if ($i > ($n * 3 / 4) and $i < $n) {
      $shadows: random($i) + "px " + random($i) + "px yellow";
    } @else {
      $shadows: -(random($i * 2)) + "px " + random($i) + "px blue";
    }
    $box-shadow: $box-shadow + $shadows + " ,";
  }
  @return str_slice(unquote($box-shadow), 0, str_length($box-shadow)-1);
}

.box-with-firework {
  position: relative;
  height: 400px;
  width: 700px;
}
.firework {
  &::before {
    content: "";
    display: block;
    width: 1px;
    height: 1px;
    margin: auto;
    border-radius: 50%;
    transform: translateY(30vh);
    box-shadow: custome-box-shadow(150);
    background: red;
    animation: firework 1.7s ease-in-out infinite;
  }
}