@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
  --dark: #111d2d;

  --white: #ffffff;

  --blue-10: #f0f2ff;
  --blue-20: #d9dcff;
  --blue-30: #b7bdff;
  --blue-40: #8c96ff;
  --blue-50: #4548ff;

  --grey-10: #f5f5f5;
  --grey-20: #f4f6f9;
  --grey-30: #e4e7eb;
  --grey-40: #c7d1db;
  --grey-50: #a5b3c6;
  --grey-60: #7f8fa4;
  --grey-70: #657487;
  --grey-80: #4d5969;
  --grey-90: #333f4f;
  --grey-100: #1e2533;

  --green-10: #f0fff4;
  --green-20: #dcfce7;
  --green-30: #bbf7d0;
  --green-40: #86efac;
  --green-50: #4ade80;

  --red-10: #fff5f5;
  --red-20: #fed7d7;
  --red-30: #feb2b2;
  --red-40: #fc8181;
  --red-50: #f56565;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: all 0.3s linear;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: var(--grey-40);
  border-radius: 4px;
}

::-webkit-scrollbar-track {
  background: var(--grey-10);
}

body {
  min-height: 100dvh;
  font-family: "Poppins", sans-serif;
  background-color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: capitalize;
}

a {
  text-decoration: none;
  color: var(--blue-50);
  opacity: 0.6;

  &:hover {
    opacity: 1;
  }

  &.active {
    opacity: 1;
  }
}

.input-group {
  position: relative;

  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: start;
}

label:has(input[type="checkbox"], input[type="radio"]) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
  cursor: pointer;

  accent-color: var(--blue-50);
  border-radius: 0.25rem;
  border: 1px solid var(--grey-40);
}

input:not([type="checkbox"], [type="radio"]),
textarea,
select {
  width: 100%;
  font-family: "Poppins", sans-serif;
  padding: 0.5rem;
  border: 1px solid rgba(17, 29, 45, 0.4);
  border-radius: 0.5rem;
  outline: transparent;

  &:focus {
    outline: 1px solid rgba(17, 29, 45, 0.8);
  }

  &::placeholder {
    color: rgba(17, 29, 45, 0.2);
  }
}

label:has(+ input:required)::after {
  content: "*";
  color: var(--red-50);
  margin-left: 0.25rem;
}

input[type="file"] {
  border: 1px dashed var(--grey-40);
  background-color: var(--grey-10);
  height: auto;
  padding: 1rem;

  &::file-selector-button {
    font-family: "Poppins", sans-serif;
    border: 1px solid var(--grey-40);
    outline: transparent;
    background: var(--white);
    color: var(--dark);
    font-weight: 600;
    border-radius: 6px;
    padding: 0.5rem;
    cursor: pointer;
  }
}

textarea {
  padding: 0.5rem;
  resize: vertical;
  transition: none;
}

.forgot-password {
  position: absolute;
  right: 0;
  top: 0;
}

div:has(> input.search) {
  position: relative;
  width: 100%;
  max-width: 30rem;

  input.search {
    width: 100%;
    padding-left: 3.5rem;
  }

  img {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    opacity: 0.4;
    cursor: pointer;
  }
}

button {
  font-family: "Poppins", sans-serif;
  outline: transparent;
  font-weight: 600;
  border-radius: 0.5rem;
  padding: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;

  &:hover {
    filter: brightness(0.95);
  }

  &:disabled {
    opacity: 0.4;
    cursor: not-allowed;

    &:hover {
      filter: none;
    }
  }

  &.cta {
    border: 1px solid rgba(17, 29, 45, 0.4);
    background-color: var(--blue-50);
    color: var(--white);
  }

  &.flat {
    background: var(--white);
    border: 1px solid rgba(17, 29, 45, 0.4);
    color: var(--dark);
  }

  &.simple {
    background: transparent;
    border: none;
    color: var(--dark);
  }
}

fieldset {
  border: 1px solid var(--grey-40);
  border-radius: 1rem;
  padding: 1.25rem;
}

.row {
  display: flex;
  gap: 1rem;
}

.toast {
  position: fixed;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: 720px;
  width: max-content;
  padding: 1rem;
  border-radius: 0.5rem;
  color: var(--dark);
  border: 2px solid var(--dark);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  user-select: none;

  &.success {
    background: var(--green-10);
    border-color: var(--green-40);
    img {
      filter: hue-rotate(293deg) brightness(4);
    }
  }

  &.error {
    background: var(--red-10);
    border-color: var(--red-40);

    img {
      filter: hue-rotate(140deg) brightness(4);
    }
  }

  &.info {
    background: var(--blue-10);
    border-color: var(--blue-40);

    img {
      filter: hue-rotate(10deg) brightness(4);
    }
  }
}