.canvasAssetManager {
  .canvasAssetManager__modalHeader {
    flex-wrap: wrap;
  }

  .canvasAssetManager__modalHeaderTitle {
    @include euiBreakpoint('xs', 's') {
      width: 100%;
      padding-bottom: $euiSize;
    }
  }

  .canvasAssetManager__meterWrapper {
    @include euiBreakpoint('xs', 's') {
      flex-grow: 1;
    }
    flex-grow: 0;
    min-width: 40%;
    align-items: center;
  }

  .canvasAssetManager__meterLabel {
    margin: 0;
  }

  .canvasAssetManager__fileUploadWrapper {
    justify-content: flex-end;
    padding-right: $euiSize;
  }

  .canvasAssetManager__modalFooter {
    justify-content: space-between;
  }

  .canvasAssetManager__emptyPanel {
    max-width: 400px;
    margin: $euiSizeXL auto 0;
  }
}

.canvasAsset {
  text-align: center;
  overflow: hidden; // hides image from outer panel boundaries

  .canvasAsset__thumb {
    margin: -$euiSizeS;
    margin-bottom: 0;
    font-size: 0; // eliminates any extra space around img
    height: 164px;
  }

  .canvasAsset__img {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;

    img {
      width: auto;
      max-width: 100%;
      max-height: 164px; // nice default proportions for typical 4x3 images
    }
  }
}