/* ===== GENERAL VALUES ===== */

:root {
  /* -- FONTS -- */

  --font-family: -apple-system-body, ui-sans-serif,
  -apple-system, system-ui, "Segoe UI", "Helvetica",
  "Apple Color Emoji", "Arial", sans-serif,
  "Segoe UI Emoji", "Segoe UI Symbol";

  /* -- GENERAL COLORS -- */

  --background-primary: #ffffff;
  --background-secondary: #f9f9f9;

  --text-primary: #000000;
  --text-secondary: #202020;

  --accent-color: #0041ff;

  /* -- PRIMARY BUTTON -- */

  --btn-primary-bg: var(--accent-color);
  --btn-primary-color: #fff;
  --btn-primary-border: transparent;
  --btn-primary-shadow:
    inset 0 2px 4px rgba(255 255 255 / 69%),
    inset 0 -2px 2px rgba(25 25 25 / 30%);

  /* -- PRIMARY BUTTON HOVER -- */

  --btn-primary-hover-bg: color-mix(in oklch, var(--btn-primary-bg), white 15%);
  --btn-primary-hover-color: #fff;
  --btn-primary-hover-border: transparent;
  --btn-primary-hover-shadow:
    inset 0 2px 4px rgba(255 255 255 / 78%),
    inset 0 -2px 2px rgba(25 25 25 / 27%);

  /* -- PRIMARY BUTTON ACTIVE -- */

  --btn-primary-active-bg: var(--btn-primary-bg);
  --btn-primary-active-color: #fff;
  --btn-primary-active-border: transparent;
  --btn-primary-active-shadow:
    inset 0 2px 3px rgba(25 25 25 / 16%),
    inset 0 -2px 3px rgba(255 255 255 / 65%);

  /* -- PRIMARY BUTTON DISABLED -- */

  --btn-primary-disabled-bg: rgba(122 122 122 / 10%);
  --btn-primary-disabled-color: #aaaaaa;
  --btn-primary-disabled-border: transparent;
  --btn-primary-disabled-shadow: none;

  /* -- SECONDARY BUTTON -- */

  --btn-secondary-bg: #f5f7f9;
  --btn-secondary-color: #5c5c5c;
  --btn-secondary-border: transparent;
  --btn-secondary-shadow:
    inset 0 2px 4px rgba(255 255 255 / 69%),
    inset 0 -2px 2px rgba(25 25 25 / 30%);

  /* -- SECONDARY BUTTON HOVER -- */

  --btn-secondary-hover-bg: #f9fcff;
  --btn-secondary-hover-color: #555555;
  --btn-secondary-hover-border: transparent;
  --btn-secondary-hover-shadow:
    inset 0 2px 4px rgba(255 255 255 / 78%),
    inset 0 -2px 2px rgba(25 25 25 / 27%);

  /* -- SECONDARY BUTTON ACTIVE -- */

  --btn-secondary-active-bg: #f0f2f4;
  --btn-secondary-active-color: #555555;
  --btn-secondary-active-border: transparent;
  --btn-secondary-active-shadow:
    inset 0 2px 3px rgba(25 25 25 / 16%),
    inset 0 -2px 3px rgba(255 255 255 / 65%);

  /* -- SECONDARY BUTTON DISABLED -- */

  --btn-secondary-disabled-bg: #f0f1f2;
  --btn-secondary-disabled-color: #aeb2b6;
  --btn-secondary-disabled-border: transparent;
  --btn-secondary-disabled-shadow:
    inset 0 2px 3px rgba(255 255 255 / 55%),
    inset 0 -2px 2px rgba(25 25 25 / 12%);

  /* -- TERTIARY BUTTON -- */

  --btn-tertiary-bg: transparent;
  --btn-tertiary-color: #5c5c5c;
  --btn-tertiary-border: transparent;
  --btn-tertiary-shadow: none;

  /* -- TERTIARY BUTTON HOVER -- */

  --btn-tertiary-hover-bg: transparent;
  --btn-tertiary-hover-color: #757e87;
  --btn-tertiary-hover-border: transparent;
  --btn-tertiary-hover-shadow: none;

  /* -- TERTIARY BUTTON ACTIVE -- */

  --btn-tertiary-active-bg: transparent;
  --btn-tertiary-active-color: #5c5c5c;
  --btn-tertiary-active-border: transparent;
  --btn-tertiary-active-shadow: none;

  /* -- TERTIARY BUTTON DISABLED -- */

  --btn-tertiary-disabled-bg: transparent;
  --btn-tertiary-disabled-color: #aaaaaa;
  --btn-tertiary-disabled-border: transparent;
  --btn-tertiary-disabled-shadow: none;

    /* -- CLASSIC BUTTON -- */

  --btn-classic-bg: linear-gradient(to bottom, #ffffff, #f5f5f7);
  --btn-classic-color: #262629;
  --btn-classic-border: #d1d1d6;
  --btn-classic-shadow: 0 1px 0 rgba(0, 0, 0, 0.025);

  /* -- CLASSIC BUTTON HOVER -- */

  --btn-classic-hover-bg: #ebebf0;
  --btn-classic-hover-color: #262629;
  --btn-classic-hover-border: #bcbcc2;
  --btn-classic-hover-shadow: 0 1px 0 rgba(0, 0, 0, 0.025);

  /* -- CLASSIC BUTTON ACTIVE -- */

  --btn-classic-active-bg: #e1e1e6;
  --btn-classic-active-color: #262629;
  --btn-classic-active-border: #bcbcc2;
  --btn-classic-active-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);

  /* -- CLASSIC BUTTON DISABLED -- */

  --btn-classic-disabled-bg: #f0f0f2;
  --btn-classic-disabled-color: #aeb2b6;
  --btn-classic-disabled-border: #e1e1e5;
  --btn-classic-disabled-shadow: none;

  /* -- INPUT -- */

  --input-bg: #fafbfc;
  --input-color: #5c5c5c;
  --input-border: #dfe2e5;
  --input-placeholder: #9da2a7;
  --input-shadow:
    inset 0 2px 4px rgba(25 25 25 / 6%),
    inset 0 -2px 3px rgba(255 255 255 / 85%);

  /* -- INPUT FOCUS -- */

  --input-focus-bg: #ffffff;
  --input-focus-color: #50555a;
  --input-focus-border: #cfd4d8;
  --input-focus-shadow:
    inset 0 2px 4px rgba(25 25 25 / 6%),
    inset 0 -2px 3px rgba(255 255 255 / 90%), 0 0 0 2px rgba(180 190 200 / 18%);

  /* -- INPUT DISABLED -- */

  --input-disabled-bg: #f0f1f2;
  --input-disabled-color: #aeb2b6;
  --input-disabled-border: #e1e3e5;
  --input-disabled-shadow:
    inset 0 2px 3px rgba(25 25 25 / 5%),
    inset 0 -2px 3px rgba(255 255 255 / 60%);

  /* -- CHECKBOX -- */

  --checkbox-bg: #f5f7f9;
  --checkbox-border: #dfe2e5;
  --checkbox-shadow:
    inset 0 2px 3px rgba(255 255 255 / 80%),
    inset 0 -2px 3px rgba(25 25 25 / 12%);

  /* -- CHECKBOX HOVER -- */

  --checkbox-hover-bg: #fafcff;
  --checkbox-hover-border: #d8dce0;
  --checkbox-hover-shadow:
    inset 0 2px 3px rgba(255 255 255 / 90%),
    inset 0 -2px 3px rgba(25 25 25 / 15%);

  /* -- CHECKBOX CHECKED -- */

  --checkbox-checked-bg: var(--accent-color);
  --checkbox-checked-border: #ededed;
  --checkbox-checked-shadow:
    inset 0 2px 3px rgba(255 255 255 / 55%),
    inset 0 -2px 3px rgba(25 25 25 / 25%);

  /* -- CHECKBOX ACTIVE -- */

  --checkbox-active-shadow:
    inset 0 2px 3px rgba(25 25 25 / 20%),
    inset 0 -2px 3px rgba(255 255 255 / 55%);

  /* -- CHECKBOX FOCUS -- */

  --checkbox-focus-ring: rgba(0 65 255 / 25%);

  /* -- CHECKBOX DISABLED -- */

  --checkbox-disabled-bg: #f0f1f2;
  --checkbox-disabled-border: #e1e3e5;
  --checkbox-disabled-opacity: 0.6;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* -- GENERAL COLORS -- */

    --background-primary: #000000;
    --background-secondary: #101010;

    --text-primary: #ffffff;
    --text-secondary: #ececec;

    --accent-color: #0041ff;

    /* -- PRIMARY BUTTON -- */

    --btn-primary-bg: var(--accent-color);
    --btn-primary-color: #fff;
    --btn-primary-border: transparent;
    --btn-primary-shadow:
      inset 0 2px 4px rgba(255 255 255 / 10%),
      inset 0 -2px 2px rgba(0 0 0 / 35%);

    /* -- PRIMARY BUTTON HOVER -- */

    --btn-primary-hover-bg: var(--btn-primary-bg);
    --btn-primary-hover-color: #fff;
    --btn-primary-hover-border: transparent;
    --btn-primary-hover-shadow:
      inset 0 2px 4px rgba(255 255 255 / 14%),
      inset 0 -2px 3px rgba(0 0 0 / 30%);

    /* -- PRIMARY BUTTON ACTIVE -- */

    --btn-primary-active-bg: var(--btn-primary-bg);
    --btn-primary-active-color: #fff;
    --btn-primary-active-border: transparent;
    --btn-primary-active-shadow:
      inset 0 2px 3px rgba(0 0 0 / 28%), inset 0 -2px 3px rgba(255 255 255 / 9%);

    /* -- PRIMARY BUTTON DISABLED -- */

    --btn-primary-disabled-bg: rgba(122 122 122 / 10%);
    --btn-primary-disabled-color: #aaaaaa;
    --btn-primary-disabled-border: transparent;
    --btn-primary-disabled-shadow: none;

    /* -- SECONDARY BUTTON -- */

    --btn-secondary-bg: #292d31;
    --btn-secondary-color: #d7dade;
    --btn-secondary-border: transparent;
    --btn-secondary-shadow:
      inset 0 2px 4px rgba(255 255 255 / 10%),
      inset 0 -2px 3px rgba(0 0 0 / 35%);

    /* -- SECONDARY BUTTON HOVER -- */

    --btn-secondary-hover-bg: #2d3237;
    --btn-secondary-hover-color: #e1e3e5;
    --btn-secondary-hover-border: transparent;
    --btn-secondary-hover-shadow:
      inset 0 2px 4px rgba(255 255 255 / 14%),
      inset 0 -2px 3px rgba(0 0 0 / 30%);

    /* -- SECONDARY BUTTON ACTIVE -- */

    --btn-secondary-active-bg: #272b2f;
    --btn-secondary-active-color: #d7dade;
    --btn-secondary-active-border: transparent;
    --btn-secondary-active-shadow:
      inset 0 2px 3px rgba(0 0 0 / 28%), inset 0 -2px 3px rgba(255 255 255 / 9%);

    /* -- SECONDARY BUTTON DISABLED -- */

    --btn-secondary-disabled-bg: #24272a;
    --btn-secondary-disabled-color: #666b70;
    --btn-secondary-disabled-border: transparent;
    --btn-secondary-disabled-shadow:
      inset 0 2px 3px rgba(255 255 255 / 5%), inset 0 -2px 2px rgba(0 0 0 / 20%);

    /* -- TERTIARY BUTTON -- */

    --btn-tertiary-bg: transparent;
    --btn-tertiary-color: #d7dade;
    --btn-tertiary-border: transparent;
    --btn-tertiary-shadow: none;

    /* -- TERTIARY BUTTON HOVER -- */

    --btn-tertiary-hover-bg: transparent;
    --btn-tertiary-hover-color: #afb2b6;
    --btn-tertiary-hover-border: transparent;
    --btn-tertiary-hover-shadow: none;

    /* -- TERTIARY BUTTON ACTIVE -- */

    --btn-tertiary-active-bg: transparent;
    --btn-tertiary-active-color: #d7dade;
    --btn-tertiary-active-border: transparent;
    --btn-tertiary-active-shadow: none;

    /* -- TERTIARY BUTTON DISABLED -- */

    --btn-tertiary-disabled-bg: transparent;
    --btn-tertiary-disabled-color: #666b70;
    --btn-tertiary-disabled-border: transparent;
    --btn-tertiary-disabled-shadow: none;

        /* -- CLASSIC BUTTON -- */

    --btn-classic-bg: linear-gradient(to bottom, #48484a, #3a3a3c);
    --btn-classic-color: #f5f5f7;
    --btn-classic-border: #636366;
    --btn-classic-shadow: none;

    /* -- CLASSIC BUTTON HOVER -- */

    --btn-classic-hover-bg: #545458;
    --btn-classic-hover-color: #f5f5f7;
    --btn-classic-hover-border: #77777c;
    --btn-classic-hover-shadow: none;

    /* -- CLASSIC BUTTON ACTIVE -- */

    --btn-classic-active-bg: #303032;
    --btn-classic-active-color: #f5f5f7;
    --btn-classic-active-border: #636366;
    --btn-classic-active-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);

    /* -- CLASSIC BUTTON DISABLED -- */

    --btn-classic-disabled-bg: #303032;
    --btn-classic-disabled-color: #666b70;
    --btn-classic-disabled-border: #424247;
    --btn-classic-disabled-shadow: none;

    /* -- INPUT -- */

    --input-bg: #292d31;
    --input-color: #d7dade;
    --input-border: #42474c;
    --input-placeholder: #777d83;
    --input-shadow:
      inset 0 2px 4px rgba(0 0 0 / 28%), inset 0 -2px 3px rgba(255 255 255 / 7%);

    /* -- INPUT FOCUS -- */

    --input-focus-bg: #2d3237;
    --input-focus-color: #e0e3e6;
    --input-focus-border: #555c63;
    --input-focus-shadow:
      inset 0 2px 4px rgba(0 0 0 / 28%),
      inset 0 -2px 3px rgba(255 255 255 / 9%), 0 0 0 2px rgba(170 180 190 / 14%);

    /* -- INPUT DISABLED -- */

    --input-disabled-bg: #24272a;
    --input-disabled-color: #666b70;
    --input-disabled-border: #34393e;
    --input-disabled-shadow:
      inset 0 2px 3px rgba(0 0 0 / 20%), inset 0 -2px 3px rgba(255 255 255 / 4%);

    /* -- CHECKBOX -- */

    --checkbox-bg: #292d31;
    --checkbox-border: #42474c;
    --checkbox-shadow:
      inset 0 2px 3px rgba(255 255 255 / 8%), inset 0 -2px 3px rgba(0 0 0 / 30%);

    /* -- CHECKBOX HOVER -- */

    --checkbox-hover-bg: #2d3237;
    --checkbox-hover-border: #4a5056;
    --checkbox-hover-shadow:
      inset 0 2px 3px rgba(255 255 255 / 11%),
      inset 0 -2px 3px rgba(0 0 0 / 35%);

    /* -- CHECKBOX CHECKED -- */

    --checkbox-checked-bg: var(--accent-color);
    --checkbox-checked-border: #3a3f44;
    --checkbox-checked-shadow:
      inset 0 2px 3px rgba(255 255 255 / 12%),
      inset 0 -2px 3px rgba(0 0 0 / 30%);

    /* -- CHECKBOX ACTIVE -- */

    --checkbox-active-shadow:
      inset 0 2px 3px rgba(0 0 0 / 30%),
      inset 0 -2px 3px rgba(255 255 255 / 10%);

    /* -- CHECKBOX FOCUS -- */

    --checkbox-focus-ring: rgba(31 95 255 / 40%);

    /* -- CHECKBOX DISABLED -- */

    --checkbox-disabled-bg: #24272a;
    --checkbox-disabled-border: #34393e;
  }
}

/* ===== FONTS ===== */

@font-face {
  font-family: "Material Symbols Outlined";
  src: url("/fonts/material-icons.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
}

/* ===== BODY ===== */

body {
  font-family: var(--font-family);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  background-color: var(--background-secondary);
  color: var(--text-secondary);
}

/* ===== LINKS ===== */

a {
  color: var(--accent-color);
  text-decoration: none;
}

/* ===== HEADINGS ===== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 300;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1.125rem;
}

h6 {
  font-size: 1rem;
}

/* ===== ICONS ===== */

.icon {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -moz-font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

/* ===== BUTTONS ===== */

/* -- GENERAL BUTTON DESIGN -- */

.btn {
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 999px;

  font: inherit;
  font-weight: 300;
  line-height: 1.25;
  text-decoration: none;

  transition:
    background-color 140ms ease,
    color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

/* -- PRIMARY BUTTON -- */

.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border-color: var(--btn-primary-border);
  box-shadow: var(--btn-primary-shadow);
}

@media (hover: hover) {
  .btn-primary:hover {
    background-color: var(--btn-primary-hover-bg);
    color: var(--btn-primary-hover-color);
    border-color: var(--btn-primary-hover-border);
    box-shadow: var(--btn-primary-hover-shadow);
  }
}

.btn-primary:active {
  background-color: var(--btn-primary-active-bg);
  color: var(--btn-primary-active-color);
  border-color: var(--btn-primary-active-border);
  box-shadow: var(--btn-primary-active-shadow);
}

.btn-primary:disabled {
  background-color: var(--btn-primary-disabled-bg);
  color: var(--btn-primary-disabled-color);
  border-color: var(--btn-primary-disabled-border);
  box-shadow: var(--btn-primary-disabled-shadow);
  cursor: not-allowed;
}

/* -- SECONDARY BUTTON -- */

.btn-secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-color);
  border-color: var(--btn-secondary-border);
  box-shadow: var(--btn-secondary-shadow);
}

@media (hover: hover) {
  .btn-secondary:hover {
    background-color: var(--btn-secondary-hover-bg);
    color: var(--btn-secondary-hover-color);
    border-color: var(--btn-secondary-hover-border);
    box-shadow: var(--btn-secondary-hover-shadow);
  }
}

.btn-secondary:active {
  background-color: var(--btn-secondary-active-bg);
  color: var(--btn-secondary-active-color);
  border-color: var(--btn-secondary-active-border);
  box-shadow: var(--btn-secondary-active-shadow);
}

.btn-secondary:disabled {
  background-color: var(--btn-secondary-disabled-bg);
  color: var(--btn-secondary-disabled-color);
  border-color: var(--btn-secondary-disabled-border);
  box-shadow: var(--btn-secondary-disabled-shadow);
  cursor: not-allowed;
}

/* -- TERTIARY BUTTON -- */

.btn-tertiary {
  background-color: var(--btn-tertiary-bg);
  color: var(--btn-tertiary-color);
  border-color: var(--btn-tertiary-border);
  box-shadow: var(--btn-tertiary-shadow);
}

@media (hover: hover) {
  .btn-tertiary:hover {
    background-color: var(--btn-tertiary-hover-bg);
    color: var(--btn-tertiary-hover-color);
    border-color: var(--btn-tertiary-hover-border);
    box-shadow: var(--btn-tertiary-hover-shadow);
  }
}

.btn-tertiary:active {
  background-color: var(--btn-tertiary-active-bg);
  color: var(--btn-tertiary-active-color);
  border-color: var(--btn-tertiary-active-border);
  box-shadow: var(--btn-tertiary-active-shadow);
}

.btn-tertiary:disabled {
  background-color: var(--btn-tertiary-disabled-bg);
  color: var(--btn-tertiary-disabled-color);
  border-color: var(--btn-tertiary-disabled-border);
  box-shadow: var(--btn-tertiary-disabled-shadow);
  cursor: not-allowed;
}

/* -- CLASSIC BUTTON -- */

.btn-classic {
  min-height: 30px;
  padding: 0 11px;
  gap: 6px;

  border: 1px solid var(--btn-classic-border);
  border-radius: 7px;

  background: var(--btn-classic-bg);
  color: var(--btn-classic-color);

  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;

  box-shadow: var(--btn-classic-shadow);
  cursor: pointer;
}

.btn-classic .icon {
  font-size: 16px;
  line-height: 1;
}

@media (hover: hover) {
  .btn-classic:hover:not(:disabled) {
    background: var(--btn-classic-hover-bg);
    color: var(--btn-classic-hover-color);
    border-color: var(--btn-classic-hover-border);
    box-shadow: var(--btn-classic-hover-shadow);
  }
}

.btn-classic:active:not(:disabled) {
  background: var(--btn-classic-active-bg);
  color: var(--btn-classic-active-color);
  border-color: var(--btn-classic-active-border);
  box-shadow: var(--btn-classic-active-shadow);
}

.btn-classic:disabled {
  background: var(--btn-classic-disabled-bg);
  color: var(--btn-classic-disabled-color);
  border-color: var(--btn-classic-disabled-border);
  box-shadow: var(--btn-classic-disabled-shadow);
  cursor: not-allowed;
}

.btn-classic:focus-visible {
  outline: 2px solid #0a84ff;
  outline-offset: 2px;
}

/* -- ICON BUTTON -- */

.btn-icon {
  padding: 0.5rem;
  font-size: 1.5rem;
}

/* ===== INPUTS ===== */

textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select {
  background-color: var(--input-bg);
  color: var(--input-color);

  border: 1px solid var(--input-border);
  border-radius: 25px;

  padding: 0.625rem 0.875rem;

  font: inherit;
  line-height: 1.25;

  box-shadow: var(--input-shadow);

  transition:
    background-color 140ms ease,
    color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

textarea.horizontal-auto,
input[type="text"].horizontal-auto,
input[type="email"].horizontal-auto,
input[type="password"].horizontal-auto,
input[type="number"].horizontal-auto,
input[type="search"].horizontal-auto,
input[type="tel"].horizontal-auto,
input[type="url"].horizontal-auto,
select.horizontal-auto {
  width: 100%;
  box-sizing: border-box;
}

textarea::placeholder,
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
input[type="url"]::placeholder {
  color: var(--input-placeholder);
}

textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
select:focus {
  background-color: var(--input-focus-bg);
  color: var(--input-focus-color);

  border-color: var(--input-focus-border);

  outline: none;

  box-shadow: var(--input-focus-shadow);
}

textarea:disabled,
input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled,
input[type="search"]:disabled,
input[type="tel"]:disabled,
input[type="url"]:disabled,
select:disabled {
  background-color: var(--input-disabled-bg);
  color: var(--input-disabled-color);

  border-color: var(--input-disabled-border);

  box-shadow: var(--input-disabled-shadow);

  cursor: not-allowed;
}

/* ===== CHECKBOXES ===== */

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;

  width: 1.25rem;
  height: 1.25rem;

  margin: 0;

  display: inline-grid;
  place-content: center;

  flex-shrink: 0;

  background-color: var(--checkbox-bg);
  border: 1px solid var(--checkbox-border);
  border-radius: 0.35rem;

  box-shadow: var(--checkbox-shadow);

  cursor: pointer;

  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

/* -- HOVER -- */

@media (hover: hover) {
  input[type="checkbox"]:hover {
    background-color: var(--checkbox-hover-bg);
    border-color: var(--checkbox-hover-border);
    box-shadow: var(--checkbox-hover-shadow);
  }
}

/* -- CHECK MARK -- */

input[type="checkbox"]::before {
  content: "";

  width: 0.375rem;
  height: 0.6875rem;

  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;

  transform: rotate(45deg) scale(0);

  transition: transform 120ms ease;
}

/* -- CHECKED -- */

input[type="checkbox"]:checked {
  background-color: var(--checkbox-checked-bg);
  border-color: var(--checkbox-checked-border);
  box-shadow: var(--checkbox-checked-shadow);
}

input[type="checkbox"]:checked::before {
  transform: rotate(45deg) scale(1);
}

/* -- ACTIVE -- */

input[type="checkbox"]:active {
  box-shadow: var(--checkbox-active-shadow);
}

/* -- FOCUS -- */

input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--checkbox-focus-ring);
  outline-offset: 2px;
}

/* -- DISABLED -- */

input[type="checkbox"]:disabled {
  background-color: var(--checkbox-disabled-bg);
  border-color: var(--checkbox-disabled-border);

  opacity: var(--checkbox-disabled-opacity);

  cursor: not-allowed;
}