
// @require ../../hr/directions/horizontal.scss
// @require core/widget/widget.scss

//FIXME: If we put an infobar inside a divider it doesn't get displayed well in Edge / IE-10/11
//FIXME: It doesn't work in IE10

/* HORIZONTAL */

.divider.linear.horizontal {

  /* EMPTY */

  &:empty {
    @extend %hr-horizontal;
  }

  /* NOT EMPTY */

  &:not(:empty) {

    @extend %widget;
    display: flex;

    &:before,
    &:after {
      @extend %hr-horizontal-base;
      content: '';
      flex: 1 1 0%; // IE-10/11 sets flex-shrink to 0 // IE-10/11 misinterpreter a unitless 0 flex-basis
      min-width: $gutter;
      align-self: center;
    }

    &:before {
      margin-right: $gutter;
    }

    &:after {
      margin-left: $gutter;
    }

  }

}

/* INFOBAR PARTIAL FIX (IE-10/11) */

// It is "partial" because it will break if we add `.infobar-bottom`, but using it without it, expecially when inside a divider, is a much more common case

html.flexbox-tweener {

  .divider.linear.horizontal {

    /* INFOBAR */

    > .infobar {

      flex-wrap: nowrap;

      > .infobar-center {
        flex-basis: auto;
      }

    }

  }

}
