.webresto-form-control {
  display: block;
  width: 100%;
  box-sizing: border-box;

  &:not(.fullwidth) {
    max-width: 18.75rem;
  }

  .mat-mdc-input-element::-webkit-calendar-picker-indicator {
    display: block !important;
  }

  .mat-mdc-form-field-focus-overlay {
    background-color: transparent !important;
  }

  .mdc-text-field--filled:not(.mdc-text-field--disabled) {
    background-color: transparent !important;
  }

  mat-form-field {
    width: 100%;

    &.mat-form-field-appearance-outline {
      .mdc-text-field--outlined {
        --mdc-outlined-text-field-outline-width: 2px;
        height: 48px;

        .mat-mdc-form-field-infix {
          padding-top: 12px;
        }
      }

      .mdc-notched-outline__leading {
        width: 1rem !important;
        border-color: var(--outline-color);
        border-radius: 0.9375rem 0 0 0.9375rem;
      }

      .mdc-notched-outline__trailing {
        border-color: var(--outline-color);
        border-radius: 0 0.9375rem 0.9375rem 0;
      }

      .mdc-notched-outline__notch {
        border-top-color: var(--outline-color);
        border-bottom-color: var(--outline-color);

        .mat-mdc-floating-label {
          top: 22px;
        }
      }
    }

    .mat-mdc-form-field-label-wrapper {
      left: 0.875rem;
      top: -1em;
      padding-top: 1em;
    }
  }
}