// New clean actionbar

footer.actionbar {
  grid-area: footer;
  background-color: $actionbar;
  padding: $spacing-xs $body-padding-mobile;
  @include media-breakpoint-up(sm) {
    padding-left: $body-padding-tablet;
    padding-right: $body-padding-tablet;
  }
  @include media-breakpoint-up(xl) {
    padding-left: $body-padding-desktop;
  }
}

.actionbar,
.splitview-list-actionbar,
.splitview-details-actionbar {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  height: $actionbar-height;
}

.actionbar {
  background-color: $primary;
}

.actionbar .btn-primary,
.splitview-list-actionbar .btn-primary,
.splitview-details-actionbar .btn-primary {
  color: $primary;
  background-color: $white;
  border-color: $white;
  &:hover, &:focus {
    color: $white;
    background-color: $link-hover-color;
    border-color: $link-hover-color;
  }
}

.actionbar .btn-secondary,
.splitview-list-actionbar .btn-secondary,
.splitview-details-actionbar .btn-secondary {
  color: $white;
  background-color: transparent;
  border-color: $white;
  &:hover, &:focus {
    color: $white;
    background-color: $link-hover-color;
    border-color: $link-hover-color;
  }
}

.actionbar .btn,
.splitview-list-actionbar .btn,
.splitview-details-actionbar .btn {
  height: $btn-height;
  margin-right: $spacing-xs;
}

.actionbar .btn-intercom,
.splitview-list-actionbar .btn-intercom,
.splitview-details-actionbar .btn-intercom {
  margin-left: auto;
}

.actionbar summary > .btn,
.splitview-list-actionbar  summary > .btn,
.splitview-details-actionbar summary > .btn {
  margin-right: 0;
}

.actionbar .btn.disabled, 
.actionbar .btn:disabled,
.bg-actionbar .btn.disabled, 
.bg-actionbar .btn:disabled {
  border-color: $white-transparenter;
  color: $white-transparent;
  background-color: $petrol;
  background-image: url("@images/pattern-stripes-petrol.png");
  .icon {
    color: $white-transparent;
  }
}