input[type="submit"],
input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"] {
    all: unset;
    border-style: solid;
    border-width: 1px;
    border-radius: 0.5em;
    display: inline-flex;
}

input[type="submit"] {
  background-color: var(--color-green);
  border-color: #111;
  cursor: pointer;
  font-size: 0.875em;
  margin-bottom: 0.5em;
  padding: 0.5em 1em;
  max-width: 100%;
  &:hover {
      border-color: #555;
  }
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"] {
    border-color: #4a4a4a;
    box-shadow: inset 0 0.0625em 0.125em rgba(10, 10, 10, 0.05);
    font-size: 1rem;
    margin-bottom: 0;
    height: 2.5em;
    width: 300px;
    max-width: 100%;
    &:focus {
        border-color: var(--color-blue);
        box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
    }
}

input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active {
    transition: all 5000s ease-in-out 0s;
}

form {
    fieldset {
        all: unset;
        display: block;
        margin-bottom: 1rem;
        i {
            align-items: center;
            color: #4a4a4a;
            display: inline-flex;
            justify-content: center;
            position: absolute;
            width: 2.5em;
            height: 2.5em;
        }
        input[type="text"],
        input[type="email"],
        input[type="number"],
        input[type="search"] {
            padding-left: 2.5em;
        }
        &:has(> input:focus) > i,
        &:has(> input:not(:placeholder-shown)) > i {
            color: white;
        }
        &:last-child {
            margin-bottom: 0;
        }
        small {
            color: var(--color-red);
            font-weight: bold;
        }
    }
    &.create, &.delete {
        display: inline-flex;
        .button.circle {
            display: inline-flex;
        }
    }
}

input[type="search"]::-webkit-search-cancel-button {
    appearance: none;
    -webkit-appearance: none;
    width: 2.5em;
    height: 2.5em;
    align-items: center;
    display: inline-flex;
    background-color: transparent;
    background-image: url("/assets/times-21899cc0.svg");
    background-size: contain;
    &:focus {
        opacity: 1;
    }
}