/*------------------------------------*\
    #FLAG (AKA MEDIA) OBJECT
\*------------------------------------*/

$flag-gutter:         $spacing-unit !default;
$flag-gutter--small:  $spacing-unit / 2 !default;
$flag-gutter--large:  $spacing-unit * 2 !default;


%o-flag,
.o-flag {
  display: table;
  width: 100%;
  
  &%o-flag--rev,
  &.o-flag--rev {
    direction: rtl;
  }
}



%o-flag__body,
.o-flag__body {
  display: table-cell;
  vertical-align: top;
  
  %o-flag--rev &,
  .o-flag--rev & {
    direction: ltr;
  }
}

%o-flag__image,
.o-flag__image {
  padding-right: $spacing-unit;
  display: table-cell;
  vertical-align: top;
  
  %o-flag--rev &,
  .o-flag--rev & {
    padding-right: 0;
    padding-left: $spacing-unit;
  }
}

%o-flag__body,
.o-flag__body,
%o-flag__image,
.o-flag__image {
  
  // Use the --center modifier to vertically align
  %o-flag--center &,
  .o-flag--center & {
    vertical-align: middle;
  }
  
  // Use --bottom to align bottom edges of the elements
  %o-flag--bottom &,
  .o-flag--bottom & {
    vertical-align: bottom;
  }
}


.o-flag__body {
  width: 100%;
}





/**
 * Large flag objects.
 */

.o-flag--large,
%o-flag--large {

    > .o-flag__image,
    > %o-flag__image {
      padding-right: $flag-gutter--large;
    }

    /**
     * Large reversed flag objects.
     */

    &.o-flag--rev,
    &%o-flag--rev {

        > .o-flag__image,
        > %o-flag__image {
            padding-right: 0;
            padding-left: $flag-gutter--large;
        }

    }
}

// 
// 
// // Flexbox adjustments
// @supports (display: flex) {
//   .o-flag {
//     display: flex;
//     align-items: flex-start;
// 
//     &--center {
//       align-items: center;
//     }
// 
//     &--bottom {
//       align-items: flex-end;
//     }
//     
//     &--rev .o-flag__image {
//       order: 1;
//       padding-left: $spacing-unit;
//       padding-right: $spacing-unit;
//     }
//   }
// 
// 
//   .o-flag__image,
//   .o-flag__body {
//       display: initial;
//   }
// 
//   .o-flag__body {
//     // min-width: 0;
//     // flex: 1 1 auto;
//     flex: 1;
//   }
// }