/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */

/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */
 .wp-block-orphic-ui-testimonial-unit {
  .testimonial-unit-content {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid;
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--orphic-wp-block-plugin-color-background);
    color: var(--orphic-wp-block-plugin-color-text);
    border-color: var(--orphic-wp-block-plugin-color-border);
    
    &.customColor {
      background-color: var(--orphic-wp-testimonial-custom-background-color, var(--orphic-wp-block-plugin-color-background));
      color: var(--orphic-wp-testimonial-custom-text-color, var(--orphic-wp-block-plugin-color-text));
      border-color: var(--orphic-wp-testimonial-custom-border-color, var(--orphic-wp-block-plugin-color-border));
    }
    
    .testimonial-text {
      flex: 1;
    }
    
    .testimonial-image {
      flex-shrink: 0;
      
      .image-button {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        overflow: hidden;
        padding: 0;
        border: 2px dashed #ddd;
        background-color: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        
        &.is-empty {
          font-size: 24px;
          color: #757575;
        }
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
}