/*
 * CloudBeaver - Cloud Database Manager
 * Copyright (C) 2020-2024 DBeaver Corp and others
 *
 * Licensed under the Apache License, Version 2.0.
 * you may not use this file except in compliance with the License.
 */

@mixin form-controls() {
  fieldset {
    padding: 0;
    border: none;
    margin: 0;

    &[disabled] {
      opacity: 1;
    }
  }

  textarea {
    resize: vertical;
    min-height: 40px;
  }

  input {
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 24px;
    &[type='search']::-ms-clear {
      display: none;
      width: 0;
      height: 0;
    }
    &[type='search']::-ms-reveal {
      display: none;
      width: 0;
      height: 0;
    }
    /* clears the ‘X’ from Chrome */
    &[type='search']::-webkit-search-decoration,
    &[type='search']::-webkit-search-cancel-button,
    &[type='search']::-webkit-search-results-button,
    &[type='search']::-webkit-search-results-decoration {
      display: none;
    }
  }

  input,
  textarea {
    box-sizing: border-box;
    padding: 7px 12px;
    width: 100%;
    border: 2px solid;
    outline: none;
    border-radius: $theme-form-element-radius;

    @include mdc-theme-prop(color, input-color, false);
    @include mdc-theme-prop(border-color, input-border, false);
    @include mdc-theme-prop(background-color, input-background, false);
    // we use box-shadow to overlap internal background-color style, we can't override it due to chrome bug
    &:-internal-autofill-selected,
    &:-internal-autofill-previewed {
      -webkit-text-fill-color: $mdc-theme-on-secondary;
      box-shadow: 0 0 0 50px $input-background inset;
    }

    &:user-invalid {
      @include mdc-theme-prop(border-color, negative, false);
    }

    &:focus,
    &[data-focus='true'] {
      @include mdc-theme-prop(border-color, primary, false);
    }

    &:not([data-select='true'])[readonly] {
      @include mdc-theme-prop(color, input-color-readonly, false);
      @include mdc-theme-prop(border-color, input-border-readonly, false);
      @include mdc-theme-prop(background-color, input-background-readonly, false);
      opacity: 1;
      &:-internal-autofill-selected,
      &:-internal-autofill-previewed {
        box-shadow: 0 0 0 50px $input-background-readonly inset;
      }
    }

    &[disabled] {
      @include mdc-theme-prop(color, input-color-readonly, false);
      @include mdc-theme-prop(border-color, input-border-readonly, false);
      @include mdc-theme-prop(background-color, input-background-readonly, false);
      pointer-events: all;
      opacity: 1;
      &:-internal-autofill-selected,
      &:-internal-autofill-previewed {
        box-shadow: 0 0 0 50px $input-background-readonly inset;
      }
    }
    &[data-embedded='true'] {
      &[disabled],
      &:not([data-select='true'])[readonly] {
        @include mdc-theme-prop(border-color, background, false);
        @include mdc-theme-prop(background-color, input-background, false);
      }
    }
  }
}
