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

.NameAndDescriptionCard {
  width: 100%;
  padding: $space-lg;
  background-color: #ffffff;
  border: $border-grey;
  margin-bottom: $space-unit;
  border-radius: $border-radius-lg;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  &__header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: $space-xs;
  }
  &__content {
    display: flex;
    flex-direction: column;
    width: 100%;
    &__nameBox {
      margin-bottom: $space-unit * 2;
      &__nameInput {
        width: 40%;
        .MuiFormHelperText-root {
          position: absolute;
          bottom: -1.5rem;
        }
      }
      .MuiInputLabel-outlined {
        transform: translate(14px, 10px) scale(1);
        font-size: $text-md;
        &.MuiInputLabel-shrink {
          font-size: $text-xs;
          color: $pico-50;
          font-weight: $font-500;
        }
      }
    }
    &__descriptionBox {
      width: 100%;
      &__descriptionInput {
        height: 5.25rem;
        width: 100%;
        .MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline {
          border-color: #f44336 !important;
        }
        .MuiOutlinedInput-multiline {
          padding: $space-xs $space-unit;
          overflow: hidden;
          height: 5.25rem;

          .MuiOutlinedInput-inputMultiline {
            height: 100% !important;
            overflow-y: scroll !important;
          }
        }

        .MuiInputLabel-outlined {
          transform: translate(14px, 9px) scale(1);
          &.MuiInputLabel-shrink {
            transform: translate(14px, -6px) scale(0.75);
            font-size: $text-xs;
            color: $pico-50;
            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: $cuddle;
          }

          .PrivateNotchedOutline-legendLabelled-13 {
            span {
              padding-right: 0;
            }
          }
        }
      }
    }
  }
  &__saveBtn {
    &.Mui-disabled {
      color: $white !important;
    }
  }
}
