.ActionBar {
  align-items: center;
  background: var(--color-white);
  border-top: 1px solid var(--color-gray3);
  bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: var(--gap-l);
  position: sticky;

  .Button {
    .Text.is-m;
  }
}

.ActionBar.is-top {
  border-top: none;
  padding-left: 0;
}

.ActionBar:not(.is-top) {
  z-index: 100;
}

.ActionBar.is-right {
  flex-direction: row-reverse;
}

// Automatically make the first button dominant.
.ActionBar:not(.is-top) > .Button:not(.Link):first-child {
  .Button.is-dominant;
}

// All red buttons should go on the right.
.ActionBar > .Link.is-red {
  order: 1;
}

.ActionBar .action-save,
.ActionBar [name='action-upload'] {
  &[disabled] {
    opacity: 0.5;
  }
}
