@import "../../../theme/global";
/**
* @prop --lar-list-item-padding-top: Top padding of the toolbar
* @prop --lar-list-item-padding-right: End padding of the toolbar
* @prop --lar-list-item-padding-bottom: Bottom padding of the toolbar
* @prop --lar-list-item-padding-left: Start padding of the toolbar
*/
$list-item-padding-top:              var(--lar-list-item-padding-top, .5rem) !default;
$list-item-padding-right:            var(--lar-list-item-padding-right, .5rem) !default;
$list-item-padding-bottom:           var(--lar-list-item-padding-bottom, .5rem) !default;
$list-item-padding-left:             var(--lar-list-item-padding-left, .5rem) !default;


:host {
  @include font-smoothing();
  @include padding($list-item-padding-top, $list-item-padding-right, $list-item-padding-bottom, $list-item-padding-left);
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
.item-inner {
  flex: 2;
  flex-direction: inherit;
  align-items: inherit;
  align-self: stretch;
  overflow: hidden;
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
}

:host(:empty) {
  display: none !important;
}

:host(.lar-item-disabled) {
  opacity: 0.2;
}


@mixin generate-color($color-name) {
  background: lar-color($color-name, shade) !important;
  color: lar-color($color-name, contrast) !important;
  fill: lar-color($color-name, contrast) !important;
  stroke: lar-color($color-name, contrast) !important;
}
@each $color-name, $value in $colors {
  :host(.lar-color-#{$color-name}) {
    @include generate-color($color-name);
  }
}