@font-face {
  font-display: swap;
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/rajdhani-latin-700-normal.woff2') format('woff2');
}

:root {
  --rccsystem-login-button-background: #ffb200;
  --rccsystem-login-button-background-active: #ffc43c;
  --rccsystem-login-button-background-hover: #ffba1b;
  --rccsystem-login-button-border: transparent;
  --rccsystem-login-button-focus: rgba(251, 188, 4, 0.3);
  --rccsystem-login-button-text: #191b1f;
}

.rccsystem-login-button {
  align-items: center;
  background: var(--rccsystem-login-button-background);
  border: 1px solid var(--rccsystem-login-button-border);
  border-radius: 100px;
  box-sizing: border-box;
  color: var(--rccsystem-login-button-text);
  display: inline-flex;
  font-family: 'Rajdhani', sans-serif;
  font-size: var(--rccsystem-login-button-font-size, 18px);
  font-weight: 700;
  gap: var(--rccsystem-login-button-gap, 12px);
  justify-content: center;
  line-height: normal;
  min-height: var(--rccsystem-login-button-min-height, 54px);
  padding: var(--rccsystem-login-button-padding, 12px 18px);
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  user-select: none;
}

.rccsystem-login-button--light {
  --rccsystem-login-button-background: #ffffff;
  --rccsystem-login-button-background-active: #ffffff;
  --rccsystem-login-button-background-hover: #ffffff;
  --rccsystem-login-button-border: #747775;
  --rccsystem-login-button-text: #191b1f;
}

.rccsystem-login-button--dark {
  --rccsystem-login-button-background: #191b1f;
  --rccsystem-login-button-background-active: #1e2025;
  --rccsystem-login-button-background-hover: #1e2025;
  --rccsystem-login-button-border: #2d2d35;
  --rccsystem-login-button-text: #ffffff;
}

.rccsystem-login-button:hover {
  background: var(--rccsystem-login-button-background-hover);
  color: var(--rccsystem-login-button-text);
  text-decoration: none;
}

.rccsystem-login-button:active {
  background: var(--rccsystem-login-button-background-active);
}

.rccsystem-login-button--light:hover,
.rccsystem-login-button--dark:hover {
  border-color: rgba(251, 188, 4, 0.6);
}

.rccsystem-login-button--light:active,
.rccsystem-login-button--dark:active {
  border-color: rgba(251, 188, 4, 0.3);
}

.rccsystem-login-button:focus-visible {
  box-shadow: 0 0 0 3px var(--rccsystem-login-button-focus);
  outline: none;
}

.rccsystem-login-button--compact {
  border-radius: 100px;
  --rccsystem-login-button-font-size: 14px;
  --rccsystem-login-button-gap: 8px;
  --rccsystem-login-button-mark-size: 22px;
  --rccsystem-login-button-min-height: 42px;
  --rccsystem-login-button-padding: 9px 14px;
}

.rccsystem-login-button--full-width {
  display: flex;
  width: 100%;
}

.rccsystem-login-button__mark {
  background: center / contain no-repeat url('./assets/rccsystem-mark.png');
  display: inline-block;
  flex: 0 0 auto;
  height: var(--rccsystem-login-button-mark-size, 30px);
  width: var(--rccsystem-login-button-mark-size, 30px);
}

.rccsystem-login-button__label {
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .rccsystem-login-button {
    transition: none;
  }
}