:root {
  --bse-dev: $dev;
  --bse-dev-rgb: to-rgb($dev);
  --bse-dev-secondary: $dev-secondary;
  --bse-dev-secondary-rgb: to-rgb($dev-secondary);
}

.dev-note {
  padding: 1rem 1rem;
  border-radius: 0.375rem;
  background: #dc3545;
  color: #fff;
  position: relative;
  border: 1px solid #dc3545;
  margin-bottom: 1rem;
}
.dev-note::before {
  content: var(--bse-dev-note-title, "Dev Note");
  display: block;
  background: #6e1b23;
  color: #fff;
  font-weight: bolder;
  padding: 0.5rem 1rem;
  top: 0;
  border-top-right-radius: calc(0.375rem - 1px);
  border-top-left-radius: calc(0.375rem - 1px);
  margin-right: -1rem;
  margin-left: -1rem;
  margin-top: -1rem;
  margin-bottom: 1rem;
  border-bottom: 1px dashed #dc3545;
}

.dev-mq-helper::before {
  content: "xs";
  text-transform: uppercase;
  width: 2.5em;
  height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dc3545;
  color: #fff;
  border-radius: 50rem;
  opacity: 0.8;
  z-index: 1090;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  pointer-events: none;
}

.dev-mq-helper::before {
  content: "xs";
}

@media (min-width: 576px) {
  .dev-mq-helper::before {
    content: "sm";
  }
}
@media (min-width: 768px) {
  .dev-mq-helper::before {
    content: "md";
  }
}
@media (min-width: 992px) {
  .dev-mq-helper::before {
    content: "lg";
  }
}
@media (min-width: 1200px) {
  .dev-mq-helper::before {
    content: "xl";
  }
}
@media (min-width: 1400px) {
  .dev-mq-helper::before {
    content: "xxl";
  }
}
.dev-toolbar {
  background: #dc3545;
  color: #fff;
}
.dev-toolbar .dev-toolbar-body {
  padding: 0.5rem;
  display: flex;
  align-items: center;
}

.dev-toolbar-collapse-container {
  position: relative;
  height: 1rem;
}
.dev-toolbar-collapse-container .dev-toolbar-collapse {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  overflow: hidden;
  pointer-events: none;
}
.dev-toolbar-collapse-container .dev-toolbar-collapse .dev-toolbar {
  position: relative;
  transition: all 0.2s ease-in-out;
  pointer-events: auto;
  transform: translateY(calc(-100% + 1rem));
}
.dev-toolbar-collapse-container .dev-toolbar-collapse .dev-toolbar:hover, .dev-toolbar-collapse-container .dev-toolbar-collapse .dev-toolbar:focus-within {
  transform: translateY(0);
}
.dev-toolbar-collapse-container .dev-toolbar-collapse .dev-toolbar:hover .dev-toolbar-body, .dev-toolbar-collapse-container .dev-toolbar-collapse .dev-toolbar:focus-within .dev-toolbar-body {
  opacity: 1;
}
.dev-toolbar-collapse-container .dev-toolbar-collapse .dev-toolbar .dev-toolbar-body {
  transition: all 0.2s ease-in-out;
  opacity: 0;
}