.edesigner {
  & :is(.__choice, .__material):has(> .__open-info) label > div > div {
    padding-right: 2rem;
  }

  & :is(.__open-info, .__close-info) {
    all: unset;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    cursor: pointer;

    &:focus-visible {
      outline: 2px solid var(--c1);
      outline-offset: -2px;
    }
  }

  & .__open-info {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;

    &:hover {
      color: var(--c1);
    }
  }

  & .__info-popover {
    --_info-offset: var(--_info-x, -1rem) 0;
    inset: var(--_info-inset, 0 auto auto 0);
    width: min(18rem, calc(100% - 2rem));
    max-height: min(30rem, 100svh - 2rem);
    margin: 0;
    padding: 1rem;
    overflow: auto;
    color: inherit;
    border: 1px solid var(--_divider);
    border-radius: var(--border-radius);
    background: var(--block-background);
    box-shadow: var(--block-shadow);
    opacity: 0;
    translate: var(--_info-offset);
    transition-property: opacity, translate, overlay, display;
    transition-duration: var(--duration-transition);
    transition-behavior: allow-discrete;

    &:popover-open {
      opacity: 1;
      translate: none;

      @starting-style {
        opacity: 0;
        translate: var(--_info-offset);
      }
    }

    > header {
      display: flex;
      gap: 1rem;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.75rem;
    }

    .__close-info {
      flex: none;
    }

    > img {
      display: block;
      width: 100%;
      max-height: 16rem;
      margin-bottom: 0.75rem;
      border-radius: var(--border-radius);
    }

    .__info-text {
      line-height: var(--line-height);

      > :first-child {
        margin-top: 0;
      }

      > :last-child {
        margin-bottom: 0;
      }
    }

    @media (max-width: 800px) {
      inset: auto 0.75rem 0.75rem;
      --_info-offset: 0 1rem;
      width: auto;
      max-height: calc(100svh - 1.5rem);
    }
  }
}