/* ==================================
   #LIST HORIZONTAL
   ================================== */

/* Variables
   ========================================================================== */

$au-list-horizontal-spacing: $au-unit-small !default;
$au-list-horizontal-divider: 1px dotted var(--au-gray-300) !default;

/* Component
   ========================================================================== */

.au-c-list-horizontal {
  display: flex;
  align-items: center;
}

.au-c-list-horizontal--small {
  font-size: var(--au-base);
}

.au-c-list-horizontal__item {
  display: flex;
  align-items: center;

  & + & {
    margin-left: $au-list-horizontal-spacing;
    padding-left: $au-list-horizontal-spacing;
    border-left: $au-list-horizontal-divider;
  }

  // Fix spacing for dropdowns and buttons
  // @TODO: find cleaner solution to make spacing consistent
  > .au-c-dropdown,
  > .au-c-button,
  > .ember-view > .au-c-button {
    margin-left: -$au-list-horizontal-spacing * 0.5;
  }
}