wagtail/client/scss/components/_chooser.scss

.chooser {
  &.blank .chosen {
    display: none;
  }

  &:not(.blank) .unchosen {
    display: none;
  }
}

// Very subdued button style specifically for choosers, as there can be a lot of
// chooser fields left unused on a page editing form.
.chooser__choose-button {
  display: flex;
  align-items: center;
  border-color: transparent;
  padding-inline-start: 0;
  // So the outline is slightly more separated from the text.
  padding-inline-end: $focus-outline-width;

  .icon {
    @include svg-icon(theme('spacing.5'), initial);
    color: inherit;
    margin-inline-end: 5px;
  }

  &:hover,
  &:focus {
    color: $color-button-hover;
    background-color: $color-white;
  }
}

.chosen {
  display: flex;
  gap: theme('spacing.4');
  align-items: center;
}

.chooser__preview {
  display: grid;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  // Prevent this item from getting smaller if the title is long.
  flex-shrink: 0;
  background-color: theme('colors.grey.150');
  color: $color-white;
  border-radius: theme('borderRadius.sm');

  @media (forced-colors: active) {
    border: 1px solid transparent;
  }

  .icon {
    width: theme('spacing.7');
    height: theme('spacing.7');
    color: inherit;
  }
}

.chooser__title {
  @apply w-body-text-large;
}

.chooser__actions {
  display: flex;
  gap: theme('spacing.[1.5]');

  .button {
    // Subdued border as there can be a lot of chooser action buttons on a page.
    border-color: theme('colors.grey.150');
  }

  // Hiding for devices capable of hover states only,
  // with opacity only so keyboard focus can move to the first interactive element to reveal it.
  @media (hover: hover) {
    opacity: 0;

    .chooser:hover &,
    .chooser:focus-within & {
      opacity: 1;
    }
  }
}

.chooser__image {
  max-width: 200px;
  max-height: 140px;
  height: auto;
  width: auto;
}