form {
  margin: 1rem auto;

  &.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 2rem;

    input {
      width: 100%;
    }
  }

  .form-field {
    label {
      font-weight: 700;
    }

    input {
      margin-top: 0.5rem;
    }
  }
}

input {
  background: var(--bg-3);
  padding: 0.5rem;
  font-size: 1rem;
  border-radius: 0.3rem;
  border: none;
  color: white;
  margin: 0;

  &.error {
    border: 1px solid var(--error);
  }
}

select {
  padding: 0.5rem;
  border-radius: 0.3rem;
  border: none;
  background-color: var(--bg-4);
  color: var(--text-link);
  font-size: 1rem;
}

.image-picker {
  margin-top: 0.3rem;
  background-color: var(--bg-3);
  padding: 1rem;
  border-radius: 0.3rem;
  transition: all 150ms ease-out;

  &:active {
    opacity: 0.5;
  }

  .drop-target {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-flow: row nowrap;

    svg {
      width: 2rem;
      height: 2rem;
    }

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

.reference-picker {
  margin-top: 0.3rem;
  width: max-content;
  position: relative;

  .selected {
    @include pressable;
    padding: 1rem;
    border-radius: 0.3rem;
    display: flex;
    align-items: center;
    flex-flow: row nowrap;
    justify-content: flex-start;
    gap: 1rem;
    background-color: var(--bg-3);
  }

  ul.entities {
    margin: 0;
    background-color: var(--bg-4);
    position: absolute;
    border-radius: 0.3rem;
    width: 100%;
    top: 110%;
    left: 0;

    li {
      padding: 0.5rem;
      border-radius: 0.3rem;

      &:hover {
        background-color: var(--bg-3);
      }
    }
  }
}