@layer recipes {
  [data-scope="carousel"][data-part="root"] {
    width: 400px;
    height: 250px;
    border-width: 2px;
    border-color: var(--colors-border-subtle);
    position: relative;
    box-sizing: content-box;
  }

  [data-scope="carousel"][data-part="item-group"] {
    scrollbar-width: none;
    -webkit-scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }

  [data-scope="carousel"][data-orientation="vertical"][data-part="item-group"] {
    height: 100%;
  }

  [data-scope="carousel"][data-part="item"] > img {
    height: 250px;
    width: 100%;
    object-fit: cover;
  }

  [data-scope="carousel"][data-part="control"] {
    border-width: 1px;
    border-color: var(--colors-border-subtle);
    background: var(--colors-bg-subtle);
    padding: 0.5rem;
    gap: 0.5rem;
    display: flex;
    align-items: center;
    position: absolute;
  }

  [data-scope="carousel"][data-orientation="horizontal"][data-part="control"] {
    left: 50%;
    transform: translateX(-50%);
    bottom: 1rem;
  }

  [data-scope="carousel"][data-orientation="vertical"][data-part="control"] {
    top: 50%;
    transform: translateY(-50%);
    right: 1rem;
    flex-direction: column;
  }

  [data-scope="carousel"]:is(
      [data-part="prev-trigger"],
      [data-part="next-trigger"]
    ):disabled {
    opacity: 0.5;
  }

  [data-scope="carousel"][data-part="indicator-group"] {
    display: flex;
    gap: 0.75rem;
  }

  [data-scope="carousel"][data-orientation="vertical"][data-part="indicator-group"] {
    flex-direction: column;
  }

  [data-scope="carousel"][data-part="indicator"] {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background: gray;
    cursor: pointer;
  }

  [data-scope="carousel"][data-part="indicator"][data-current] {
    background: var(--colors-bg-primary-bold);
  }

  [data-scope="carousel"][data-orientation="vertical"]:is(
      [data-part="prev-trigger"],
      [data-part="next-trigger"]
    ) {
    transform: rotate(90deg);
  }
}
