.bloom-container {
  button.bloom-control {
    z-index: 10;
  }

  .bloom-menu {
    position: absolute;
    top: anchor(top);
    left: anchor(0%);

    width: anchor-size(width);
    height: anchor-size(height);
    border-radius: 20px;

    interpolate-size: allow-keywords;
    transition-property: display, width, height, border-radius, top, left, transform;
    transition-behavior: allow-discrete;
    transition-duration: 500ms;
    transition-timing-function: linear(0, 0.1504, 0.421, 0.6644, 0.8358, 0.9381, 0.9898, 1.0106, 1.0152, 1.0129, 1.0088, 1.0051, 1.0025, 1.0009, 1.0002, 1, 1);
    z-index: -1;
    will-change: transform;
    backface-visibility: hidden;
    transform-origin: center center;

    .bloom-trigger {
      display: flex;
      opacity: 1;
      transition-property: opacity, width, height, filter;
      transition-delay: 60ms;
      transition-duration: 100ms;
      transition-timing-function: linear;
      filter: blur(0px);
    }
    .bloom-contents {
      display: none;
      opacity: 0;
      transition: opacity 100ms ease, display 100ms ease allow-discrete;
    }

    .bloom-filters-menu {
      transition-property: height, display, overlay, padding;
      transition-behavior: allow-discrete;
      position: absolute;
      width: anchor-size(--bloom-filters-control width);
      height: anchor-size(--bloom-filters-control height);
      position-area: bottom center;
      top: anchor(top);
      overflow: hidden;
      transition-duration: 500ms;
      transition-timing-function: linear(0, 0.1504, 0.421, 0.6644, 0.8358, 0.9381, 0.9898, 1.0106, 1.0152, 1.0129, 1.0088, 1.0051, 1.0025, 1.0009, 1.0002, 1, 1);
      display: none;
      padding: 0px;

      &[data-expanded] {
        padding: 0px 4px 4px 4px;
        display: block;
        height: 130px;
        @starting-style {
          height: anchor-size(--bloom-filters-control height);
          padding: 0px;
        }
      }
    }

    li.main:has([data-expanded]) button svg {
      transform: rotate(90deg);
      @starting-style {
        transform: rotate(0deg);
      }
    }

    &:popover-open {
      z-index: 10;
      top: anchor(center);
      left: anchor(50%);
      border-radius: 12px;
      width: 200px;
      height: 171px;
      overflow: unset;

      li.main[data-controller="bloom"] {
        transition-property: transform;
        transform-origin: center top;
        transition-duration: 500ms;
        transition-timing-function: linear(0, 0.1504, 0.421, 0.6644, 0.8358, 0.9381, 0.9898, 1.0106, 1.0152, 1.0129, 1.0088, 1.0051, 1.0025, 1.0009, 1.0002, 1, 1);
      }

      &:has([data-expanded]) {
        transform: scale(0.96);

        li.main:has([data-expanded]) {
          transform: scale(1.104167);
        }
      }

      .bloom-trigger {
        opacity: 0;
        width: 0px;
        height: 0px;
        transition-delay: 0ms;
        transition-duration: 25ms;
        filter: blur(5px);
        @starting-style {
          opacity: 1;
          height: 20px;
          width: 20px;
          transition-delay: 60ms;
          transition-duration: 10ms;
          filter: blur(0px);
        }
      }
      .bloom-contents {
        display: block;
        opacity: 1;
        transition: opacity 250ms ease, display 250ms ease allow-discrete;
        @starting-style {
          opacity: 0;
        }
      }
      @starting-style {
        width: anchor-size(width);
        height: anchor-size(height);
        border-radius: 20px;
        top: anchor(top);
        left: anchor(0%);
      }
    }
  }
}