.mosida-environment-indicator[hidden] {
  display: none !important;
}

.mosida-environment-indicator {
  position: fixed;
  inset-block-start: var(--space-sm);
  inset-inline-start: 50%;
  z-index: var(--environment-indicator-z-index);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-block-size: var(--environment-indicator-min-height);
  max-inline-size: calc(100vw - (var(--space-md) * 2));
  padding: var(--space-xs) var(--space-md);
  transform: translateX(-50%);
  border: 1px solid var(--environment-unknown-border);
  border-radius: var(--radius-full);
  background: var(--environment-unknown-surface);
  box-shadow: var(--shadow-sticky);
  color: var(--environment-unknown-text);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  pointer-events: none;
}

.mosida-environment-indicator--bottom {
  inset-block-start: auto;
  inset-block-end: var(--space-sm);
}

.mosida-environment-indicator--inline {
  position: sticky;
  inset-block-start: var(--space-sm);
  inset-inline-start: auto;
  display: flex;
  inline-size: fit-content;
  margin: var(--space-sm) auto;
  transform: none;
}

.mosida-environment-indicator--page {
  position: static;
  inset: auto;
  max-inline-size: 100%;
  transform: none;
  box-shadow: none;
}

.mosida-environment-indicator--login {
  inset-inline-start: var(--space-sm);
  transform: none;
}

.mosida-environment-login .login-heading p {
  overflow-wrap: break-word;
  word-break: keep-all;
}

.mosida-environment-indicator__signal {
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
  flex: 0 0 var(--space-sm);
  border-radius: var(--radius-full);
  background: var(--environment-unknown-signal);
}

.mosida-environment-indicator__label {
  flex: 0 0 auto;
  white-space: nowrap;
}

.mosida-environment-indicator__host {
  min-inline-size: 0;
  overflow: hidden;
  padding-inline-start: var(--space-sm);
  border-inline-start: 1px solid currentColor;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  opacity: 0.8;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mosida-environment-indicator--development {
  border-color: var(--environment-development-border);
  background: var(--environment-development-surface);
  color: var(--environment-development-text);
}

.mosida-environment-indicator--development .mosida-environment-indicator__signal {
  background: var(--environment-development-signal);
}

.mosida-environment-indicator--staging {
  border-color: var(--environment-staging-border);
  background: var(--environment-staging-surface);
  color: var(--environment-staging-text);
}

.mosida-environment-indicator--staging .mosida-environment-indicator__signal {
  background: var(--environment-staging-signal);
}

.mosida-environment-indicator--production {
  border-color: var(--environment-production-border);
  background: var(--environment-production-surface);
  color: var(--environment-production-text);
}

.mosida-environment-indicator--production .mosida-environment-indicator__signal {
  background: var(--environment-production-signal);
}

.mosida-environment-indicator--unknown {
  border-color: var(--environment-unknown-border);
  background: var(--environment-unknown-surface);
  color: var(--environment-unknown-text);
}

.mosida-environment-indicator--unknown .mosida-environment-indicator__signal {
  background: var(--environment-unknown-signal);
}

@media (forced-colors: active) {
  .mosida-environment-indicator {
    border-width: 2px;
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .mosida-environment-indicator__signal {
    border: 1px solid CanvasText;
    background: CanvasText !important;
  }
}

@media (max-width: 48rem) {
  /* 모바일 사이드바가 열린 동안에는 페이지 헤더의 환경 배지가
     고정 드로어 위로 올라와 메뉴 항목을 가리지 않도록 숨긴다. */
  body:has(.bg-overlay.active) .mosida-environment-indicator--page {
    display: none !important;
  }

  .mosida-environment-indicator--login {
    inset-block-start: calc(var(--space-3xl) + var(--space-xs));
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }

  .mosida-environment-login .login-page {
    padding-block-start: calc(
      var(--space-3xl) + var(--environment-indicator-min-height) + var(--space-lg)
    ) !important;
  }
}