/**
 * Copyright 2020 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

$input-default-padding: 8px;
$input-height: 36px;

@use '@material/notched-outline/_index' as notched-outline;
@use '@material/textfield/_index' as textfield with (
  $height: 40px,
  // wow, cant set to 36px
  $input-padding: $input-default-padding,
  $input-padding-top: $input-default-padding,
  $input-padding-bottom: $input-default-padding,
  $label-offset: $input-default-padding,
  $outlined-idle-border: var(--fire-color-input-borders),
  $outlined-hover-border: var(--fire-color-input-borders),
  $outlined-input-padding-top: $input-default-padding,
  $outlined-input-padding-bottom: $input-default-padding
);
@use '@material/switch' with (
  $baseline-theme-color: primary
);

@use '@material/select/_index' as select with (
  $height: $input-height,
  $label-padding: $input-default-padding,
  $arrow-padding: $input-default-padding,
  $outline-label-offset: $input-default-padding,
  $outlined-idle-border: var(--fire-color-input-borders),
  $outlined-hover-border: var(--fire-color-input-borders)
);

@import './color';
@import './z';

@import '@material/select/mdc-select';
@import '@material/textfield/mdc-text-field';

.mdc-text-field {
  @include textfield.height(36px); // lol, but this works
}

.mdc-select {
  .mdc-select__dropdown-icon {
    bottom: 8px; // Changing height does not affect the dropdown-icon placement
  }

  .mdc-select__selected-text {
    padding-top: 4px !important; // Changing height does not affect the trigger-text placement
  }
}

@import '@material/switch/mdc-switch';
.mdc-switch {
  margin-right: 8px; // more space between the switch and its label
}

.mdc-select--outlined,
.mdc-text-field--outlined {
  .mdc-notched-outline {
    @include notched-outline.floating-label-float-position(85%);

    .mdc-floating-label {
      top: $input-default-padding + 1px; // no var to config
    }
  }
}

.mdc-select--outlined:not(.mdc-select--disabled) .mdc-select__native-control,
.mdc-text-field--outlined:not(.mdc-text-field--disabled)
  .mdc-text-field__input {
  // Force white background (instead of transparent, e.g. in dialogs).
  background-color: $COLOR_WHITE_PRIMARY;
  border-radius: 4px; // To avoid "leaking" background color in corners.

  // We also reset the z-index, causing the notched outline to ALWAYS come on
  // top of the input (since the outline will go under otherwise.)
  z-index: auto;

  // Note: We tried and abandoned setting background on .mdc-notched-outline,
  // because Material styles position it ABOVE the input on Chrome autofill,
  // causing input content text to be covered. See b/170908531 (internal) and:
  // https://github.com/material-components/material-components-web/pull/4232/files
}

// Highlight checkboxes when navigating from keyboard
.mdc-data-table__header-row-checkbox
  .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate)
  ~ .mdc-checkbox__background:before,
.mdc-data-table__row-checkbox
  .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate)
  ~ .mdc-checkbox__background:before {
  background-color: rgba(0, 0, 0, 0.54);
}
