@import 'settings';

.form-type-managed-file .image-widget {
  margin-bottom: 1rem;

  .preview img {
    width: 100%;
  }

  @include for-tablet-portrait-up {
    display: flex;
    flex-wrap: wrap;

    .preview {
      flex: 0 0 auto;
    }

    .file--image {
      margin-bottom: 0.5rem;
    }

    .image-widget-data {
      flex: 1;
    }

  }

  .image-widget-data {
    padding: 0.5rem 1rem;
    background-color: $gray-lightest;
  }

  .messages {
    margin-bottom: 16px;
  }
}

// close the gap between an image upload and the description text right below it.
.form-type-managed-file .image-widget + .help-block {
  margin-top: -0.5rem
}

.btn--post-remove-image {
  position: absolute;
  top: -1px;
  right: -1px;
  background: rgba(0,0,0,0.2);
  border: 0;
  padding: 0;
  transition: 0.3s background-color;

  &:hover {
    background: rgba(0,0,0,0.8);

    .btn-icon {
      transform: rotate(90deg);
    }
  }

  &:focus {
    outline: none;
  }

  .btn-icon {
    fill: white;
    height: 32px;
    width: 32px;
    transition: 0.3s transform;
  }

}

