@use '../style/mixins' as *;
@use '../style/variables' as *;
@use '../theme/theme-mode-variables' as *;

.p-inputgroup {
  background: var(--input-txt-bg-color);
  border: 1px solid $input-default-border-color;
  @include border-radius($borderRadius);
  @include transition(border-color $transitionDuration);

  input, .p-dropdown, p-inputMask {
    width: 100% !important;

    &[type=text] {

      &::placeholder {
        color: $input-txt-placeholder;
        position: relative;
        top: 1px;
      }
    }
  }

  .p-inputgroup-addon {
    border: none;
    background-color: $input-txt-bg-color;
    padding: 9px 5px;
    color: var(--form-text-color);
    font-size: 20px;

    &.p-inputgroup-addon-checkbox, &.p-inputgroup-addon-radiobutton {
      padding: 0.4em 0.857em;
    }
  }

  > .p-inputgroup-addon:first-child, > input:first-child, > .p-dropdown:first-child {
    border-radius: $borderRadius 0 0 $borderRadius;
  }

  > *:last-child {
    border-radius: 0 $borderRadius $borderRadius 0;
  }


  .p-inputtext:not(:last-child), p-chips:not(:last-child) .p-inputtext, input[type='password']:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
  }

  &:disabled {
    opacity: .3;
  }

  &.p-disabled {
    .p-inputgroup-addon {
      opacity: 0.3;
    }
  }

  &.read-only {
    align-items: center;
    display: flex;
    min-height: 30px;
    place-content: flex-end;

    sd-basic-copy-clipboard, sd-action-button {
      ::ng-deep .p-button {
        background-color: transparent !important;
      }
    }

    textarea {
      word-break: break-all;
    }

    & > * {
      background-color: var(--input-txt-bg-read-only-color);
    }
  }

  sd-basic-copy-clipboard {
    background-color: transparent;

    sd-action-button {
      height: 100%;
    }

    .p-button {
      height: 100%;
    }

    .isLoading {
      padding: 9px;
    }
  }

  &.ng-invalid.ng-touched {
    border-color: $input-txt-border-error-color;
  }

  &:not(.p-disabled):hover {
    border-color: $input-txt-border-hover-color;
  }

  &:not(.p-disabled).focus {
    border-color: $input-txt-border-focus-color;
    box-shadow: 0 3px 6px 0 $input-txt-shadow-color;
  }

  &.filter-input-group {
    background: var(--input-txt-bg-color);
    height: 38px;

    ::ng-deep button {
      .dvl-icon {
        font-size: 23px !important;
      }
    }

    .p-inputtext {
      border-radius: $borderRadius;
    }

    .p-inputgroup-addon {
      display: flex;
      font-size: 20px;
      padding: 4px;
      min-width: 40px;
      background: $tree-search-input-bg-color;
      transition: all 300ms;

      &.filter {
        color: var(--dropdown-filter-icon-color);

        &.clear {
          cursor: pointer;

          &:hover {
            color: $side-panel-search-active-clear;
          }
        }
      }

      &::before {
        margin: auto;
      }
    }
  }
}
