@use 'src/styles/abstracts' as *;

body {
  .MuiOutlinedInput-root {
    border-radius: $border-radius-main;
    &:hover {
      .MuiOutlinedInput-notchedOutline {
        border-color: $cuddle-110;
      }
    }

    .MuiOutlinedInput-notchedOutline {
      border-color: $cuddle;
      border-width: 0.0625rem !important;
    }
  }

  .Mui-disabled {
    color: $text-color-50 !important;
    .MuiOutlinedInput-notchedOutline {
      border-color: $cuddle-70 !important;
    }
  }
  .Mui-focused {
    .MuiOutlinedInput-notchedOutline {
      border-color: $cuddle-110 !important;
    }
  }
}

.TextField {
  .MuiOutlinedInput-notchedOutline {
    border: 0.0625rem solid $cuddle-70 !important;
  }

  &__OutLined {
    &__Small {
      .MuiInputLabel-outlined.MuiInputLabel-marginDense {
        font-weight: $font-500;
        font-size: $text-md;
        color: $text-color;
        transform: translate(14px, 8px) scale(1);
      }

      .MuiInputLabel-outlined.MuiInputLabel-shrink {
        transform: translate(14px, -6px) scale(0.75);
        color: $primary-color;
      }

      .MuiInputBase-root {
        .MuiInputBase-input {
          font-weight: $font-500;
          font-size: $text-md;
          color: $text-color;
          padding: 0.375rem 1rem;
          height: 1rem;
        }

        .MuiOutlinedInput-notchedOutline {
          border-color: #bdcee8;
        }

        .PrivateNotchedOutline-legendLabelled-13 {
          span {
            padding-right: 0;
          }
        }
      }
    }
    &__Medium {
      .MuiInputLabel-outlined.MuiInputLabel-marginDense {
        font-weight: $font-500;
        font-size: $text-md;
        color: $pico-50;
        transform: translate(14px, 8px) scale(1);
      }

      .MuiInputLabel-outlined.MuiInputLabel-shrink {
        transform: translate(14px, -6px) scale(0.75);
        color: $pico-80;
        &.Mui-error {
          color: #f44336 !important;
        }
      }

      .MuiInputBase-root {
        &.Mui-error .MuiOutlinedInput-notchedOutline {
          border-color: #f44336 !important;
        }
        .MuiInputBase-input {
          font-weight: $font-500;
          font-size: $text-md;
          color: $text-color;
          padding: 0.375rem 1rem;
          height: 1.25rem;
        }

        .MuiOutlinedInput-notchedOutline {
          border-color: #bdcee8;
        }

        .PrivateNotchedOutline-legendLabelled-13 {
          span {
            padding-right: 0;
          }
        }
      }
    }
    &__Large {
      .MuiInputBase-root {
        .MuiInputBase-input {
          font-weight: $font-500;
          font-size: $text-md;
          color: $text-color;
          padding: 0.5625rem 1rem 0.625rem;
          height: 1rem;
        }

        .MuiOutlinedInput-notchedOutline {
          border-color: #bdcee8;
        }

        .PrivateNotchedOutline-legendLabelled-13 {
          span {
            padding-right: 0;
          }
        }
      }
    }
  }

  &__TextArea {
    &__OutLined {
      &__Small {
        min-height: 56px;
        .MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline {
          border-color: #f44336 !important;
        }
        .MuiOutlinedInput-multiline {
          padding: 10px 1em;
          overflow: hidden;
          height: 56px;

          .MuiOutlinedInput-inputMultiline {
            height: 36px !important;
            overflow-y: scroll !important;
          }
        }

        .MuiInputLabel-outlined {
          transform: translate(14px, 14px) scale(1);
          &.MuiInputLabel-shrink {
            transform: translate(14px, -6px) scale(0.75);
            font-size: $text-md;
            color: $pico-80;
            font-weight: $font-500;
          }
        }

        .MuiFormLabel-root {
          color: $pico-50;
          font-weight: $font-500;
          font-size: $text-md;
          &.Mui-error {
            color: #f44336;
          }
        }

        .MuiInputBase-root {
          .MuiInputBase-input {
            font-weight: $font-500;
            font-size: $text-md;
            color: $text-color;
          }

          .MuiOutlinedInput-notchedOutline {
            border-color: #bdcee8;
          }

          .PrivateNotchedOutline-legendLabelled-13 {
            span {
              padding-right: 0;
            }
          }
        }
      }
    }
  }
}
