
// @require widgets/container/container.scss

/* INFOBAR */

.infobar {

  @extend %container;
  @extend %targetable;
  @include children-no-gutter ();
  @include color ( $infobar-color, $infobar-color-force, $infobar-color-basic );
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  /* SECTIONS GUTTER */

  > :not(:first-child):not(.infobar-title):not(.infobar-subtitle):not(.infobar-bottom) {
    margin-left: $gutter;
  }

  /* LEFT / RIGHT */

  &-left,
  &-right {
    flex-shrink: 0;
  }

  /* CENTER */

  &-center {
    flex: 1 1 0%; // IE-10/11 sets flex-shrink to 0 // IE-10/11 misinterpreter a unitless 0 flex-basis
  }

  /* BOTTOM */

  //FIXME: Cannot be used for not 100% or fixed width elements, or the .infobar will be bigger than needed (for instance take a look at `toast`)

  &-bottom {
    width: 100%;
    margin-top: $gutter;
  }

  /* TITLE / SUBTITLE */

  &-title,
  &-subtitle {
    margin-bottom: 0 !important;
  }

  /* TITLE */

  &-title {
    @include size ( $infobar-title-size, $infobar-title-size-force, $infobar-title-size-basic );
  }

}
