:root {
  --j-calculator-input-height: 2rem;
}

.mdc-notched-outline__leading,
.mdc-notched-outline__notch,
.mdc-notched-outline__trailing {
  border-color: var(--jr-text-field-outline-color, var(--j-color-foreground)) !important;
  border-width: var(--jr-text-field-outline-width, 1px) !important;
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover,
.mdc-select--outlined:not(.mdc-select--disabled):not(.mdc-select--focused):hover {
  .mdc-notched-outline__leading,
  .mdc-notched-outline__notch,
  .mdc-notched-outline__trailing {
    border-color: var(--jr-text-field-outline-color, var(--j-color-foreground)) !important;
  }
}

.mdc-select--focused,
.mdc-text-field--focused {
  .mdc-notched-outline__leading,
  .mdc-notched-outline__notch,
  .mdc-notched-outline__trailing {
    border-color: var(--jr-text-field-focus-outline-color, var(--j-color-foreground)) !important;
    border-width: var(--jr-text-field-focus-outline-width, 2px) !important;
  }
}

j-input[name="purchasePrice"] {
  .mdc-select--focused,
  .mdc-text-field--focused {
    .mdc-notched-outline__leading,
    .mdc-notched-outline__notch,
    .mdc-notched-outline__trailing {
      border-color: var(--jr-list-item-headline-text-field-focus-outline-color, var(--j-color-foreground)) !important;
    }
  }
}

.mdc-notched-outline__leading {
  border-bottom-left-radius: var(--jr-text-field-container-shape, var(--jdBorderRadiusSm)) !important;
  border-top-left-radius: var(--jr-text-field-container-shape, var(--jdBorderRadiusSm)) !important;
}

.mdc-notched-outline__trailing {
  border-bottom-right-radius: var(--jr-text-field-container-shape, var(--jdBorderRadiusSm)) !important;
  border-top-right-radius: var(--jr-text-field-container-shape, var(--jdBorderRadiusSm)) !important;
}

.mdc-icon-button {
  height: unset !important;
  padding: 0 !important;
}

.mdc-select,
.mdc-text-field {
  background: var(--jr-text-field-container-color, transparent);

  &:hover {
    outline: none !important;
  }
}

.mdc-select--focused,
.mdc-text-field--focused {
  background: var(--jr-text-field-focus-container-color, transparent);
}

.mdc-select__selected-text,
.mdc-text-field__input {
  --j-color-foreground: var(--jr-text-field-input-text-color, var(--j-color-foreground));
  font-size: var(--jr-text-field-input-text-size, 1rem);
  font-weight: var(--jr-text-field-input-text-weight, 400);
}

j-input[name="purchasePrice"] {
  .mdc-select__selected-text,
  .mdc-text-field__input {
    --j-color-foreground: var(--jr-list-item-headline-text-field-input-text-color, var(--j-color-foreground));
  }
}

.mdc-select:not(.mdc-select--disabled) .mdc-select__selected-text,
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input,
.mdc-icon-button,
.mdc-text-field:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-helper-text,
.mdc-select:not(.mdc-select--disabled) + .mdc-select-helper-text {
  caret-color: var(--j-color-foreground);
  color: var(--j-color-foreground) !important;
}

.mdc-select.mdc-select--disabled .mdc-select__selected-text,
.mdc-text-field.mdc-text-field--disabled .mdc-text-field__input,
.mdc-icon-button,
.mdc-text-field.mdc-text-field--disabled + .mdc-text-field-helper-line .mdc-text-field-helper-text {
  color: var(--j-color-foreground) !important;
  filter: opacity(.5);
}

.mdc-text-field-helper-text::before {
  display: none;
  height: auto;
}

.mdc-select-helper-text:not(.mdc-select-helper-text--persistent) {
  display: none;
}

.mdc-text-field-helper-line,
.mdc-select-helper-line {
  margin: 0 16px;
  min-height: .5rem;
}

@media screen and (min-width: 650px) {
  .mdc-floating-label {
    display: none !important;
  }
  
  .mdc-floating-label--float-above {
    display: none !important;
  }
  
  .mdc-text-field--outlined,
  .mdc-select--outlined .mdc-select__anchor {
    height: var(--j-calculator-input-height);
  }
}

@media screen and (max-width: 650px) {
  /* disable border where the input's label lives */
  .mdc-notched-outline__notch {
    border-top: none;
  }
  
  .mdc-floating-label:not(.mdc-text-field--disabled) {
    color: var(--j-color-foreground) !important;
  }
}