.o_form_statusbar.state-statusbar {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #d8dadd;
  border-top: 1px solid #d8dadd;
  gap: 1rem;
  margin-bottom: 1rem;
  min-height: 48px;
  overflow-x: auto;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  scrollbar-width: thin;
}

.o_form_statusbar .o_statusbar_buttons {
  flex: 1 1 auto;
  min-width: 0;
}

.o_form_statusbar .o_field_statusbar {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  min-width: max-content;
}

.o_form_statusbar .o_statusbar_status {
  align-items: stretch;
  display: flex;
  flex-direction: row;
  min-width: max-content;
}

.o_form_statusbar .o_arrow_button {
  --o-statusbar-border: #c9ccd2;
  --o-statusbar-bg: #f6f7f8;
  --o-statusbar-color: #4c4f55;

  align-items: center;
  background: var(--o-statusbar-bg);
  border: 1px solid var(--o-statusbar-border);
  border-left-width: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--o-statusbar-color);
  display: inline-flex;
  font-size: 0.8125rem;
  font-weight: 600;
  justify-content: center;
  line-height: 1.2;
  min-height: 32px;
  min-width: 5.75rem;
  opacity: 1;
  padding: 0.35rem 0.95rem 0.35rem 1.35rem;
  position: relative;
  white-space: nowrap;
}

.o_form_statusbar .o_arrow_button::before,
.o_form_statusbar .o_arrow_button::after {
  border-bottom: 16px solid transparent;
  border-top: 16px solid transparent;
  content: "";
  position: absolute;
  top: -1px;
}

.o_form_statusbar .o_arrow_button::before {
  border-left: 12px solid #fff;
  left: 0;
  z-index: 1;
}

.o_form_statusbar .o_arrow_button::after {
  border-left: 12px solid var(--o-statusbar-border);
  right: -12px;
  z-index: 2;
}

.o_form_statusbar .o_arrow_button span,
.o_form_statusbar .o_arrow_button {
  z-index: 3;
}

.o_form_statusbar .o_arrow_button:not(.o_first)::after {
  border-left-color: var(--o-statusbar-border);
}

.o_form_statusbar .o_arrow_button:not(.o_first) {
  margin-right: 12px;
}

.o_form_statusbar .o_arrow_button.o_first {
  border-left-width: 1px;
  padding-left: 0.95rem;
}

.o_form_statusbar .o_arrow_button.o_first::before {
  display: none;
}

.o_form_statusbar .o_arrow_button.o_last {
  margin-right: 0;
}

.o_form_statusbar .o_arrow_button.o_last::after {
  display: none;
}

.o_form_statusbar .o_arrow_button_current {
  --o-statusbar-border: #714b67;
  --o-statusbar-bg: #714b67;
  --o-statusbar-color: #fff;
}

.o_form_statusbar .o_arrow_button_current::after {
  border-left-color: #714b67;
}

.o_form_statusbar .o_arrow_button_done {
  --o-statusbar-border: #bfc4c9;
  --o-statusbar-bg: #e9ecef;
  --o-statusbar-color: #3f464d;
}

.o_form_statusbar .o_arrow_button_special {
  --o-statusbar-border: #dc3545;
  --o-statusbar-bg: #dc3545;
  --o-statusbar-color: #fff;
}

.o_form_statusbar .o_arrow_button_special::after {
  border-left-color: #dc3545;
}

.o_form_statusbar .o_arrow_button:disabled {
  opacity: 1;
  pointer-events: none;
}

.o_form_statusbar .o-dropdown.d-none {
  display: none !important;
}

@media (min-width: 768px) {
  .o_form_statusbar.state-statusbar {
    position: sticky;
    top: var(--mes-nav-height, 70px);
    z-index: 19;
  }
}

@media (max-width: 767.98px) {
  .o_form_statusbar.state-statusbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
  }

  .o_form_statusbar .o_field_statusbar,
  .o_form_statusbar .o_statusbar_status {
    width: 100%;
  }

  .o_form_statusbar .o_statusbar_status {
    overflow-x: auto;
  }

  .o_form_statusbar .o_arrow_button {
    min-width: 5rem;
  }
}