body, input, select, textarea {
  background: var(--color-white);
  color: var(--color-black);
}

body {
    height: 100%;
}

input, select, textarea {
  border: 1px solid var(--color-black);
}

a {
  color: var(--color-orange);
}

input[type="submit"] {
  padding: 0.4em;
}

.omnom-popup {

    &__container {
        input[type="text"], input:not([type]), textarea {
            padding: 0.2em 0.4em;
            width: 100%;
        }

        .field {
            margin-bottom: 0.4em;
            width: 100%;
        }
        width: 22rem;
        font-size: 100% !important;
        border: 1px solid var(--primary-color);
        min-height: 100%;

        h2 {
            font-size: $small-font;
            font-weight: 800;
            margin-bottom: 0.75rem;
        }
    }

    &__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1em;
        background: linear-gradient(90deg, var(--alternative-color) 10%, rgba(52,121,134,1) 100%);

        button {
          padding: 0.2em;
          cursor: pointer;
        }
    }

    &__title {
      span {
        color: #fff;
      }
      @extend %omnomTitle;
    }

    &__form {
      margin-bottom: 0.5em;

        .tags-input {
            margin-bottom: 0.5rem;
        }
        .chip-control {
          margin: 0.4em;
          padding: 0.2em;
          display: inline-block;
          border: 1px solid var(--primary-color);
        }
    }

    &__controls {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 5px;

        .button {
            border: 1px solid #fff;
            border-radius: 5px;
            color: #fff;
            padding: 0.5em;
            background-color: rgba(0, 0, 0, 0.2);
        }
    }

    &__submit {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        margin-top: 0.75rem;

        .button.is-primary,
        .button.is-primary:hover {
            background-color: var(--primary-color-light);
        }
    }
}

#omnom-content {
  padding: 0.2rem 1rem 0.5rem 1rem;
}

.hidden {
  display: none;
}
.error {
  font-size: 1.2em;
  text-align: center;
  background: var(--color-muted-red);
  border: 2px solid var(--color-red);
  padding: 1em;
}
a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, label:focus-visible {
  outline: 2px solid var(--primary-color);
}
.field-row {
  margin-top: 0;
}
