@import url('../../../core/CloudTheme.css');

$radius: 6px;

.outsideWrapper {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;

  .helperText {
    color: $black-black3;
    margin: 4px 0 0 0;
    &.errorText {
      color: $red-red2;
    }
  }
}

.inputWrapperBox {
  background-color: #fff;
  border: 1px solid $stroke-stroke1;
  border-radius: $radius;
  transition: all 0.2s;
  &:hover,
  &.dragging {
    border-color: $blue-blue4;
    box-shadow: 0px 0px 0px 3px $blue-blue4,
      0px 1px 2px 4px rgba(33, 37, 44, 0.08);
  }
  &.focus {
    border: 1px solid $blue-primary;
  }
  &.error {
    border: 1px solid $red-red2;
    &:hover {
      box-shadow: 0px 0px 0px 3px $red-red4,
        0px 1px 2px 4px rgba(33, 37, 44, 0.08);
    }
  }
  &.disabled {
    border: 1px solid $black-black4;
    background-color: $black-black6;
  }

  .inputContainer {
    > div > textarea {
      padding: 0;
      font-size: 14px;
      font-weight: 400;
      color: $black-black1;
    }
    ::placeholder {
      color: $black-black3;
      opacity: 1;
    }
    width: 100%;
    max-width: 100%;
    padding: 8px 12px;
    box-sizing: border-box;
    height: 84px;
    > div {
      padding: 0;
      width: 100%;
    }

    :global(.MuiOutlinedInput-notchedOutline) {
      border: none;
    }
  }

  .blueArea {
    border: none;
    width: 100%;
    padding: 8px 12px;
    height: 32px;
    box-sizing: border-box;
    background-color: $blue-blue5;
    text-transform: none;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: flex-start;
    border-radius: 0 0 5px 5px;
    border-top: 1px solid $stroke-stroke1;
    box-shadow: none;
    transition: none;
    &:hover {
      box-shadow: none;
    }
    &.disabled {
      background-color: transparent;
      border-top: transparent;
      > svg {
        display: none;
      }
    }
    & > * path {
      fill: $black-black2;
    }

    .textAreaLabel {
      color: $black-black2;
    }

    .clickLabel {
      min-width: auto;
      padding: 0;
      color: $blue-primary;
      font-weight: 400;
      text-transform: lowercase;
      box-shadow: none;
      transition: none;
      background: none;
      font-size: 12px;
      line-height: 16px;
      font-weight: 400;
      &:hover {
        background-color: transparent;
        box-shadow: none;
        color: $blue-dark;
      }
    }
  }
}