.filter-bar {
  .filter-bar-filters {
    display: inline-block;
    margin-top: 0.25rem;
    margin-right: 1rem;

    label {
      color: $gray-500;
    }
  }

  .filter-bar-search {
    display: inline-block;
    padding-right: 2.1875rem;

    input {
      font-size: 0.9em;
      width: 19rem;
      padding-left: 1.25em;
    }

    .input-group-addon {
      padding: 0 .75em;
    }
  }

  .dropdown {
    a {
      font-size: 0.9em;
      color: $gray-700;
      font-family: $font-family-brand-light;
    }
  }
}


$filter-bar-alert-shadow: rgba($blue-700, 0.1);

.filter-bar-alert {
  margin: 1.5rem -4rem rem(-24);
  box-shadow: inset 0 0 rem(4) $filter-bar-alert-shadow;

  .inline-alert-message {
    margin-left: 2rem;
  }
}

@include media-breakpoint-down(sm)  {
  //Keep dropdown filter arrows from breaking on smaller devices
  .filter-bar .dropdown a {
    white-space: nowrap;
  }
}

.start-date date-picker input.dropdown-toggle {
  margin-left: 0;
}

.nav.filter-bar {
  align-items: center;
  justify-content: space-between;
}

.search-and-filter {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
}

.filter-bar-actions {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;

  .fixed-action-btn {
    @extend .ml-4;
    position: relative;
    right: unset;
  }

  .fab-cog .fab-toggle {
    background-color: $gray-600;
  }

  button.btn-secondary {
    align-self: end;
  }

  button.btn-secondary {
    margin-right: auto;
  }

  .fab-links .fab-btn .ico-view-list:before {
    margin-top: rem(11);
    font-size: rem(18);
  }

  access-control { display: flex }
}

.dropdown-filters .dropdown-item { text-transform: capitalize; }


// Responsive Flow

.nav.filter-bar { flex-wrap: wrap; }
.filter-bar-search { flex: 0 0; }
.filter-bar-actions { order: 2 }
.dropdown-filters {
  margin: 12px 0 0 0;
  flex: 2 1 100%;
  order: 3;
  width: 100%;
  flex-wrap: wrap;
}


@include media-breakpoint-up(sm) {
  .filter-bar {
    &.nav { margin-left: -1.125rem; }
    .filter-bar-actions { order: 3 }
    .dropdown-filters {
      flex: 2 1;
      margin-top: 0;
    }
  }
}
