@import "./Common.scss";

.inputfield {
  --input-field--font-size: var(--potzblitz--font-size);
  --input-field--font: var(--potzblitz--font);
  --input-field--padding: 10px;
  --input-field--color-background: var(--potzblitz--color-background);
  --input-field--color-foreground: var(--potzblitz--color-foreground);

  @include ComponentLayout;

  input {
    background: var(--input-field--color-background);
    border: 0;
    outline: 0;
    flex-grow: 1;
    align-self: stretch;
    padding: var(--input-field--padding);
    color: var(--input-field--color-foreground);
    -webkit-appearance: none;
    -moz-appearance: textfield;
    &:active,
    &:focus {
      border: 0;
      outline: 0;
    }
  }

  .input-wrapper {
    flex-grow: 1;
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(4ch, auto) 1fr minmax(4ch, auto)
  }

  .step-button {
    align-self: stretch;
    justify-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    transition: opacity 200ms ease;
    &:hover {
      color: var(--input-field--color-background) !important;
      background: var(--input-field--color-foreground) !important;
    }
  }

  input[type="number"] {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    min-width: 10ch;
    text-align: center;
    font-size: var(--input-field--font-size);
    font-family: var(--input-field--font);
    // background: var(--input-field--color-background);
  }

  input[type="text"] {
    color: var(--input-field--color-foreground);
    border-color: var(--input-field--color-foreground);
    border-bottom: var(--text--border-width) solid
      var(--input-field--color-foreground);
    font-size: var(--input-field--font-size);
    font-family: var(--input-field--font);
    // background: var(--input-field--color-background);

    &:focus {
      border-bottom: var(--) solid currentColor;
    }
  }

  textarea, .input {
    padding: var(--input-field--padding);
    color: var(--input-field--color-foreground);
    border-color: var(--input-field--color-foreground);
    border-bottom: var(--text--border-width) solid
      var(--input-field--color-foreground);
    font-size: var(--input-field--font-size);
    font-family: var(--input-field--font);
    // background: var(--input-field--color-background);
    border: 0;
    outline: 0;
    width: 100%;
    resize: none;

    &:focus {
      border-bottom: var(--) solid currentColor;
    }
  }

  label {
    @include LabelStyle;
  }
}