:root {
  --ds-primary: #001944;
  --ds-secondary: #0041ff;

  --ds-blue-50: #F2F6FF;
  --ds-blue-100: #E7EEFE;

  --ds-grey-0: #ffffff;
  --ds-grey-50: #Fafbfe;
  --ds-grey-100: #F4F6FA;
  --ds-grey-200: #EAEDF6;
  --ds-grey-300: #CCD3DF;
  --ds-grey-600: #5F6D84;
  --ds-grey-700: #414D5E;

  --ds-orange-100: #FFEBDB;
  --ds-orange-500: #fc811f;

  --ds-red-500: #D93948;

  --ds-button: var(--ds-secondary);
  --ds-button-hover: #0037DE;
  --ds-button-focus: #0030BF;
  --ds-button-pressed: #012798;
  
  --ds-text-primary: var(--ds-primary);
  --ds-text-secondary: var(--ds-grey-600);
}


/* Containers */

.ds-stack {
  display: flex;
  flex-direction: column;
}

.ds-stack.ds-direction-column { flex-direction: column; }
.ds-stack.ds-direction-row { flex-direction: row; }

.ds-stack.ds-gap-4 { gap: 4px; }
.ds-stack.ds-gap-8 { gap: 8px; }
.ds-stack.ds-gap-12 { gap: 12px; }
.ds-stack.ds-gap-16 { gap: 16px; }
.ds-stack.ds-gap-24 { gap: 24px; }
.ds-stack.ds-gap-52 { gap: 52px; }

.ds-card {
  background: var(--ds-grey-50);
  border: 1px solid var(--ds-grey-200);
  padding: 16px;
  border-radius: 16px;
}

.ds-form-buttons {
  margin-top: 40px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.ds-form-buttons .ds-button {
  max-width: unset;
}

.ds-icon svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 599px) {
  .ds-form-buttons {
    flex-direction: column;
  }
  
  .ds-form-buttons .ds-button.ds-button-primary {
    order: -1
  }

  .ds-card {
    border-radius: 8px;
  }
}

/* Typography */

.ds-typography {
  margin: 0;
  color: var(--ds-text-primary);
}

.ds-typography.ds-error {
  color: var(--ds-red-500);
}

.ds-typography-body1, .ds-typography-body2 {
  font-weight: 400;
}

.ds-typography-body1 {
  font-size: 14px;
  line-height: 150%;
}

.ds-typography-body2 {
  font-size: 12px;
  line-height: 130%;
}

.ds-typography-h1, .ds-typography-h3, .ds-typography-h4 {
  font-family: "CodecPro";
}

.ds-typography-h1 {
  font-weight: 600;
  line-height: 32px;
  line-height: 130%;
}

.ds-typography-h3, .ds-typography-h4 {
  font-weight: 600;
  line-height: 24px;
}

.ds-typography-h3 {
  font-size: 20px;
}

.ds-typography-h4 {
  font-size: 18px;
}

.ds-list {
  margin: 0;
  padding: 0;
}

.ds-list li {
  list-style: inside;
}

/* Buttons */

.ds-button {
  border: 1px solid var(--ds-button);
  outline: 1px solid white;
  outline-offset: 1px;
  border-radius: 40px;
  padding: 0 16px;
  height: 40px;
  font-family: "CodecProBold";
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: fit-content;
  justify-content: center;
}

.ds-button.ds-icon-button {
  min-width: 40px;
  padding: 0;
  flex-shrink: 0;
}

.ds-button .ds-icon {
  width: 18px;
  height: 18px;
}

.ds-button span {
  height: 18px;
}

.ds-button:disabled {
  pointer-events: none;
}

.ds-button.ds-button-primary:hover,
.ds-button.ds-button-secondary:hover {
  border-color: var(--ds-button-hover);
}

.ds-button.ds-button-primary:focus-visible,
.ds-button.ds-button-secondary:focus-visible {
  border-color: var(--ds-button-focus);
}

.ds-button.ds-button:focus-visible {
  outline-color: var(--ds-button-focus);
}

.ds-button.ds-button-primary:active,
.ds-button.ds-button-secondary:active {
  border-color: var(--ds-button-pressed);
}

.ds-button.ds-button-primary:disabled,
.ds-button.ds-button-secondary:disabled {
  border-color: var(--ds-grey-300);
}

.ds-button.ds-button-primary {
  background: var(--ds-button);
  color: var(--ds-grey-0);
}

.ds-button.ds-button-primary:hover {
  background: var(--ds-button-hover);
}

.ds-button.ds-button-primary:focus-within {
  background: var(--ds-button-focus);
}

.ds-button.ds-button-primary:active {
  background: var(--ds-button-pressed);
}

.ds-button.ds-button-primary:disabled {
  color: var(--ds-grey-200);
  background-color: var(--ds-grey-300);
}

.ds-button.ds-button-secondary {
  background: white;
  color: var(--ds-button);
}

.ds-button.ds-button-secondary:hover,
.ds-button.ds-button-ghost:hover {
  background: var(--ds-blue-50);
  color: var(--ds-button-hover);
}

.ds-button.ds-button-secondary:focus-visible,
.ds-button.ds-button-ghost:focus-visible {
  background: var(--ds-blue-50);
  color: var(--ds-button-focus);
}

.ds-button.ds-button-secondary:active,
.ds-button.ds-button-ghost:active {
  background: var(--ds-grey-0);
  color: var(--ds-button-pressed);
}

.ds-button.ds-button-secondary:disabled,
.ds-button.ds-button-ghost:disabled {
  color: var(--ds-grey-300);
}

.ds-button.ds-button-ghost {
  background-color: transparent;
  color: var(--ds-button);
  border-color: transparent;
}

a.ds-link {
  text-decoration: underline;
  color: var(--ds-button);
  font-weight: 700;
}

a.ds-link:hover {
  color: var(--ds-button-hover);
}

a.ds-link:focus-visible {
  color: var(--ds-button-focus);
}

a.ds-link:active {
  color: var(--ds-button-pressed);
}

/* Alerts */

.ds-alert {
  padding: 8px;
  border-radius: 16px;
  font-size: 12px;
  display: flex;
  gap: 8px;
}

.ds-alert:has(.ds-alert-title) {
  padding: 16px;
}

.ds-alert .ds-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--ds-grey-0);
}

.ds-alert .ds-alert-title {
  font-weight: 700;
  line-height: 16px;
}

.ds-alert-warning {
  background-color: var(--ds-orange-100);
}

.ds-alert-warning .ds-icon {
  background-color: var(--ds-orange-500);
}

.ds-alert-info {
  background-color: var(--ds-blue-100);
}

.ds-alert-info .ds-icon {
  background-color: var(--ds-secondary);
}

/* Inputs */

.ds-radio-card {
  cursor: pointer;
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
  font-weight: unset;
}

.ds-radio-card input[type="radio"],
.ds-radio-card .ds-card:after {
  position: absolute;
  width: 20px;
  height: 20px;
  right: 16px;
  top: 16px;
}

.ds-radio-card input[type="radio"] {
  margin: 0;
  opacity: 0;
}

.ds-radio-card .ds-card:after {
  content: "";
  box-shadow: inset 0px 0px 0px 1px var(--ds-grey-600);
  background-color: white;
  border-radius: 50%;
}

.ds-radio-card input[type="radio"]:checked + .ds-card {
  border: 1px solid var(--ds-button);
  background-color: var(--ds-blue-50);
}

.ds-radio-card input[type="radio"]:checked + .ds-card:after {
  box-shadow: inset 0px 0px 0px 5px var(--ds-button);
}

.ds-radio-card input[type="radio"]:focus-visible + .ds-card:after {
  outline: 1px solid var(--ds-button);
  outline-offset: 1px;
}

.ds-radio-card .ds-card .ds-typography-h4 {
  padding-right: 50px;
}

.ds-radio-card .ds-card .ds-typography-body1 {
  color: var(--ds-text-secondary);
}

.ds-checkbox {
	position: relative;
	cursor: pointer;
  font-weight: unset;
  margin: 0;
  flex-direction: row;
  display: inline-flex;
}

.ds-checkbox .ds-icon {
  width: 20px;
  height: 20px;
  border: 2px solid red;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-checkbox input[type="checkbox"] {
  height: 20px;
  width: 20px;
  opacity: 0;
  position: absolute;
  left: 0;
  top:0;
  margin: 0;
}

.ds-checkbox .ds-icon {
  border: 1px solid var(--ds-grey-600);
  color: var(--ds-grey-0);
}

.ds-checkbox .ds-icon svg {
  opacity: 0;
  transform: scale(1.5);
}

.ds-checkbox input[type="checkbox"] + .ds-icon {
  outline: 1px solid white;
  outline-offset: 1px;
}

.ds-checkbox input[type="checkbox"]:checked + .ds-icon {
  border-color: var(--ds-button);
  background-color: var(--ds-button);
}

.ds-checkbox input[type="checkbox"]:checked + .ds-icon svg {
  opacity: 1;
}

.ds-checkbox:hover input[type="checkbox"] + .ds-icon {
  border-color: var(--ds-button);
  background-color: var(--ds-blue-50);
}

.ds-checkbox:hover input[type="checkbox"]:checked + .ds-icon {
  border-color: var(--ds-button-hover);
  background-color: var(--ds-button-hover);
}

.ds-checkbox input[type="checkbox"]:focus-visible + .ds-icon {
  outline-color: var(--ds-button-focus);
  border-color: var(--ds-button-focus);
}

.ds-checkbox input[type="checkbox"]:focus-visible:checked + .ds-icon {
  background-color: var(--ds-button-focus);
}

.ds-checkbox:active input[type="checkbox"] + .ds-icon {
  border-color:  var(--ds-button-pressed);
}

.ds-checkbox:active input[type="checkbox"]:checked + .ds-icon {
  background-color:  var(--ds-button-pressed);
}

.ds-text-field {
  padding: 8px 16px;
  height: 40px;
  border: 1px solid var(--ds-grey-200);
  border-radius: 24px;
  margin: 0;
  box-sizing: border-box;
  color: var(--ds-primary);
  outline: none;
  caret-color: var(--ds-secondary);
}

.ds-text-field::placeholder {
  color: var(--ds-grey-600);
}

.ds-text-field[type="number"]::-webkit-outer-spin-button,
.ds-text-field[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ds-text-field[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.ds-text-field:focus {
  border-color: var(--ds-secondary);
}

.ds-text-field:invalid,
.ds-text-field[aria-invalid="true"] {
  border-color: var(--ds-red-500);
}

.ds-otp-input .ds-otp-main-field {
  display: none;
}

.ds-otp-input .ds-otp-fields {
  flex-direction: row;
  align-items: center;
}

.ds-otp-input .ds-otp-fields .ds-stack {
  flex-direction: row;
}

.ds-otp-input .ds-otp-fields .ds-otp-divider {
  width: 8px;
  padding-top: 1px;
  border-bottom: 1px solid  var(--ds-grey-600);
  height: 0;
}

.ds-otp-input .ds-otp-fields .ds-text-field {
  width: 42px;
  height: 52px;
  border-radius: 16px;
  padding: 0;
  text-align: center;
  padding-top: 4px;
}

/** Others **/

.ds-divider {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--ds-grey-200);
}