@use "../../sass/abstracts/variables" as var;

.form {
  &__fieldset {
    border: 2px solid var.$primary-color;
    padding: 1rem 1rem 2rem;
    width: max-content;
  }

  &--login & {
    &__fieldset {
      margin: auto;
    }
  }

  &--todo {
    margin-top: 1rem;
  }
}

.form__legend {
  color: var.$primary-color;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0 1rem;
}

.form__label {
  display: block;
  margin-bottom: 0.5rem;
  color: var.$primary-color-dark;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}

.form__field {
  border: 2px solid var.$primary-color;
  transition: all 0.3s ease-in-out 0s;

  &:not([type="checkbox"]) {
    width: 100%;
    padding: 0.5rem;

    &:focus {
      box-shadow: 2px 2px 2px var.$shadow-color;
      outline: none;
      transform: translateY(-2px) translateX(-2px);
    }

    & + * {
      margin-top: 1rem;
    }
  }

  &--textarea {
    min-height: 10rem;
    min-width: 20rem;
  }
}

.btn {
  display: block;
  padding: clamp(0.5rem, 3vw, 0.8rem) clamp(0.5rem, 3vw, 1rem);
  border: none;
  border-radius: 3px;
  font-weight: 600;
  cursor: pointer;
}

.btn--submit {
  background: var.$primary-color;
  color: hsl(0, 0%, 100%);
  margin-left: auto;
  margin-right: auto;
  transition: all 0.3s ease-in-out 0s;

  &:hover {
    background-color: var.$primary-color-light;
    transform: scale(1.1);
  }

  &:active {
    background-color: var.$primary-color-dark;
    transform: scale(1);
  }
}

.btn--user {
  background: var.$secondary-color;
  border: 2px solid var.$primary-color;
  border-radius: 50%;
  width: 5rem;
  height: 5rem;
  padding: 1rem;

  &:hover {
    background: var.$secondary-color-light;
    border-color: var.$primary-color-light;
  }

  &:active {
    background: var.$secondary-color-dark;
    border-color: var.$primary-color-dark;
  }
}

.btn--action {
  background-image: linear-gradient(
    to left,
    var.$background-color,
    var.$background-color 50%,
    var.$primary-color 50%
  );
  background-size: 201% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  border: 3px solid var.$primary-color;
  border-radius: 6px;
  color: var.$primary-color;
  transition: all 0.3s ease-in-out 0s;

  &:hover {
    background-position: 0 0;
    color: var.$foreground-color-alt;
  }

  &:active {
    background-position: 100% 0;
    color: var.$primary-color-dark;
    text-decoration: underline 1px;
  }
}

.btn--delete {
  background-image: linear-gradient(
    to left,
    var.$background-color,
    var.$background-color 50%,
    var.$delete-color 50%
  );
  border-color: var.$delete-color;
  color: var.$delete-color;

  &:hover {
    color: var.$foreground-color-alt;
  }

  &:active {
    color: var.$delete-color;
  }
}

.btn--filters {
  background: var.$background-color;
  border: 1px solid #666;

  &.btn--current {
    background: #ededed;
  }
}