/*
TODO this chooser style has been made more generic based on two identical
methods for choosing pages and images that were previously included in their
own less files in each app directory (and since deleted). It would be best if
an admin 'theme' provided all the design for a UI in a single place, but
should that be a series of overrides to the css provided from an app? If so,
perhaps those two previous less files should be re-instated and then
overridden here? hmm.
*/

.chooser {
  // We show the 'chosen' state...
  @include clearfix();

  input[type='text'] {
    float: left;
    width: 50%;
    margin-inline-end: 1em;
  }

  .chosen {
    display: block;
  }

  .unchosen,
  .chosen {
    position: relative;

    .icon {
      color: $color-grey-3;
      @include svg-icon(2.5em);
      vertical-align: middle;
      margin-inline-end: 0.625rem;
    }

    // TODO: [icon-font] remove when the Wagtail icon font is removed
    &:before {
      vertical-align: middle;
      font-family: $font-wagtail-icons;
      content: '';
      // position: relative
      display: inline-block;
      // float: left;
      color: $color-grey-3;
      line-height: 1em;
      font-size: 2.5em;
      margin-inline-end: 0.3em;
    }
  }

  .unchosen {
    display: none;
  }

  .actions {
    @include clearfix;
    overflow: hidden;

    li {
      float: left;
      margin: 0.3em;
    }
  }

  // ...unless the .page-chooser has the 'blank' class set
  &.blank {
    .chosen {
      display: none;
    }

    .unchosen {
      display: block;
    }
  }
}

// standard way of doing a chooser where the chosen object's title is overlaid
.page-chooser,
.snippet-chooser,
.document-chooser {
  .chosen {
    .title {
      color: $color-grey-1;
      // display: block;
      padding-inline-start: 1em;
      display: inline-block;
    }

    .actions {
      clear: both;
      padding-top: 0.6em;
    }
  }
}

// TODO: [icon-font] remove when the Wagtail icon font is removed
.page-chooser,
.snippet-chooser,
.document-chooser,
.image-chooser {
  .unchosen,
  .chosen {
    &:before {
      display: none;
    }
  }
}

.image-chooser {
  .chosen {
    padding-inline-start: $thumbnail-width;

    &:before {
      display: inline-block;
    }

    .preview-image {
      float: left;
      margin-inline-start: -($thumbnail-width);
      margin-inline-end: 1em;
      max-width: $thumbnail-width;

      // Resize standard Wagtail thumbnail size (165x165) to 130 for space-saving purposes.
      // We could request a 130x130 rendition, but that's just unnecessary and burdens installations
      // where images are store off-site with higher rendering times.
      img {
        max-width: $thumbnail-width;
        max-height: $thumbnail-width;
        height: auto;
        width: auto;
      }
    }
  }
}