/* static/css/forms.css */

/* Container geral do form */
.form-content {
  max-width: 1000px;
}


.form-g {
  margin-bottom: var(--spacing-medium);
}

/* Labels */
label {
  display: block;
  margin-bottom: var(--spacing-small);
  color: var(--text-color-700);

  & .asteriskField {
    margin-left: calc(var(--spacing-small) / 2);
    color: #f00;
  }
}

/* Inputs, selects e textareas */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: var(--spacing-small) var(--spacing-medium);
  border: 1px solid var(--light-color-300);
  border-radius: var(--border-radius-md);
  box-sizing: border-box;
  box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
  transition: border-color 0.2s, box-shadow 0.2s;

  &::placeholder {
    color: var(--text-color-500);
  }
}

/* Foco */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary-color-300) !important;
  box-shadow: 0 0 4px rgba(214, 187, 251, 0.5) !important;
}

/* Estados especiais */
input[disabled],
select[disabled],
textarea[disabled] {
  background: #f0f0f0;
  cursor: not-allowed;
}

input[readonly] {
  background: #fafafa;
  border-color: #ddd;
}

/* Textarea */
textarea {
  min-height: 100px;
  resize: vertical;
}

/* Checkbox e Radio */
input[type="checkbox"] {
  appearance: none;
  margin-right: var(--spacing-small);
  position: relative;
  width: 0.9rem;
  height: 0.9rem;
  border: 0.125rem solid var(--light-color-300);
  border-radius: 4px;

  &:checked {
    background-color: var(--primary-color-50);
    border-color: var(--primary-color) !important;
  }
}

/* Características do marcador */
input[type="checkbox"]::before {
  content: "";
  /* Posicionar no meio */
  position: absolute;
  top: 50%;
  left: 50%;
  /* Tamanho do marcador */
  width: 0.5rem;
  height: 0.5rem;
  /* Formato do marcador */
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  /* Posicionar no meio */
  transform: translate(-50%, -50%) scale(0);
  transform-origin: center;
  transition: 0.125s transform ease-in-out;
  /* Cor do marcador */
  box-shadow: inset 1rem 1rem var(--primary-color);
}

input[type="checkbox"]:checked::before {
  transform: translate(-50%, -50%) scale(1);
}


/* Mensagens de erro */
.form-error {
  color: var(--danger-color-700);
  font-size: 14px;
  margin-top: var(--spacing-small);
}

/* Mensagens de sucesso */
.form-success {
  color: var(--success-color);
  font-size: 14px;
  margin-top: var(--spacing-small);
}

/* Botão de submit (já herdando do .btn) */
.button, button[type = "submit"] {
  width: 100%;
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: var(--border-radius-md) !important;
  box-shadow: var(--shadow-sm);
  padding: 10px 18px;
  color: #fff;

  &:hover {
    background-color: var(--primary-color-700);
  }
}

.button-sm {
  font-size: 14px;
  padding: 4px 8px !important;
}

.button-success {
  background-color: var(--success-color-600) !important;
  border-color: var( --success-color-600) !important;

  &:hover {
    background-color: var(--success-color-700) !important;
  }
}

.button-danger {
  background-color: var(--danger-color-600) !important;
  border-color: var( --danger-color-600) !important;

  &:hover {
    background-color: var(--danger-color-700) !important;
  }
}

.button-outline {
  background-color: transparent !important;
  border: 1px solid var(--primary-color) !important;
  color: var(--primary-color) !important;

  &:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
  }
}

.button-success-outline {
  background-color: transparent !important;
  border: 1px solid var(--success-color-600) !important;
  color: var(--success-color-600) !important;

  &:hover {
    background-color: var(--success-color-600) !important;
    color: #fff !important;
  }
}

.button-danger-outline {
  background-color: transparent !important;
  border: 1px solid var(--danger-color-600) !important;
  color: var(--danger-color-600) !important;

  &:hover {
    background-color: var(--danger-color-600) !important;
    color: #fff !important;
  }
}

.button-secondary {
  width: 100%;
  background-color: var(--secondary-color) !important;
  border: 1px solid var(--light-color-300) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 10px 18px !important;
  color: var(--text-color-700) !important;
  font-weight: 500 !important;

  &:hover {
    background-color: var(--light-color-200) !important;
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.8;
  }
}

a.button, a.button-secondary {
  width: auto;
}

.button-link {
  padding: 5px 10px;

  &:hover {
    cursor: pointer;
  }
}

.button-link-outline {
    font-size: 14px;
    display: flex;
    gap: 4px;
    align-items: center;
    font-weight: 500;
    color: var(--text-color-900);
    border: 1px solid var(--light-color-300);
    border-radius: var(--border-radius-md);
    padding: 10px;
    /* padding: 4px 8px; */

    & .featured-icon {
        width: 2rem;
        height: 2rem;
        border: none;
        border-radius: var(--border-radius);
    }

    & .featured-icon.delete {
        background-color: var(--danger-color-50);

        & i {
            color: var(--danger-color-500);
        }
    }

    & p {
        margin: 0;
        text-align: center;
    }

    &:hover {
        cursor: pointer;
        border-color: var(--primary-color);
    }

    &.btn-delete:hover {
        border-color: var(--danger-color-500);
    }
}