/*
  - https://moderncss.dev/pure-css-custom-styled-radio-buttons/
 */

:root {
  --green-200: hsl(148, 38%, 91%);
  --green-500: hsl(164, 43%, 41%);
  --green-600: hsl(169, 82%, 27%);
  --green-800: hsl(166, 82%, 17%);
  --green-850: hsl(185, 24%, 22%);
  --red-500: hsl(0, 66%, 54%);
  --white: hsl(0, 0%, 100%);
  --grey-500: hsl(186, 15%, 59%);
}

body {
  font-family: "Karla", sans-serif;
  background-color: var(--green-200);
}

.hidden {
  display: none;
}

.form {
  background-color: var(--white);
  margin: 3rem auto 1rem;
  padding: 2rem;
  border-radius: 0.5rem;

  width: min(90%, 600px);

  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.page-title {
  margin: 0 0 1rem;
}

.input-group {
  label {
    font-size: 1rem;
    display: block;
    margin-bottom: 0.5rem;
  }

  input,
  textarea {
    display: block;
    width: 100%;
    padding: 0.5rem;
    border-radius: 0.35rem;
    border: 1px solid var(--grey-500);
    resize: none;

    &:focus {
      outline: 1px solid var(--green-600);
      border-color: var(--green-600);
    }
  }
}

.radio-group {
  .radio-group__label {
    margin: 0 0 1rem;
  }

  label {
    border: 1px solid var(--grey-500);
    border-radius: 0.35rem;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    position: relative;
    width: 100%;

    &:hover {
      border-color: var(--green-600);
    }

    &:has(> input:checked) {
      background-color: var(--green-200);
      border-color: var(--green-600);
    }
  }

  input[type="radio"] {
    appearance: none;
    border: 1px solid var(--grey-500);
    border-radius: 100%;
    height: 1em;
    width: 1em;
    margin: 0 0.5rem -0.1rem 0;
    position: relative;

    &::before {
      position: absolute;
      content: "";
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 0.6rem;
      height: 0.6rem;
      border-radius: 100%;
      background-color: transparent;
    }

    &:checked {
      border: 1px solid var(--green-600);

      &::before {
        background-color: var(--green-600);
      }
    }
  }

  /* Mejor solución, pero con soprte extremadamente limitado */
  /* input[type="radio"] {
    accent-color: var(--green-600);
  } */
}

.checkbox-group {
  margin-bottom: 1rem;

  .checkbox-item {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 1rem;
  }

  label {
    cursor: pointer;
  }

  input[type="checkbox"] {
    appearance: none;
    border: 1px solid var(--grey-500);
    border-radius: 0.25rem;
    height: 1em;
    width: 1em;
    margin: 0;
    position: relative;
    flex-shrink: 0;

    &:checked {
      background-color: var(--green-600);
      border-color: var(--green-600);
    }

    &::after {
      position: absolute;
      content: "\2713";
      top: 50%;
      left: 50%;
      transform: translate(-47%, -50%);
      color: white;
    }
  }

  /* input[type="checkbox"] {
    accent-color: var(--green-600);
  } */
}

/* Marcar automáticamente con '*' los label de los inputs requeridos */
.input-group label:has(+ :is(input, textarea)[required])::after,
.form-label--req::after {
  content: "*";
  color: var(--green-600);
  margin-left: 0.15ch;
}

.input-group :is(input, textarea):hover,
.radio-group label:hover {
  border-color: var(--green-600);
}

.radio-group__items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;

  @media (min-width: 32.5rem) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.btn {
  padding: 1rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: 0.15s ease-in-out all;
}

.btn--primary {
  background-color: var(--green-600);
  color: var(--white);

  &:hover {
    background-color: var(--green-800);
  }
}

.btn--block {
  display: block;
  width: 100%;
}

.has-errors :is(input, textarea, checkbox, .radio-group label) {
  border-color: var(--red-500);
}

.form__error {
  font-size: 0.85rem;
  color: var(--red-500);
  margin: 0.25rem 0 0;
}

.success-toast {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--green-850);
  color: white;
  padding: 1.5rem;
  border-radius: 0.5rem;

  .toast__header {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;

    h2 {
      font-size: 1rem;
      margin: 0;
    }
  }

  p {
    margin: 0;
    font-size: 0.85rem;
  }
}