alfresco-content-app/projects/aca-content/src/lib/components/search/search-input/search-input.component.scss

$search-width: 594px;
$search-height: 32px;
$search-background: var(--theme-search-background-color);
$search-border-radius: 4px;
$top-margin: 12px;

.app-search-container {
  color: var(--theme-foreground-text-color);
  width: 100%;
  max-width: $search-width;
  height: $search-height + $top-margin;

  .app-search-button:is(button) {
    width: 32px;
    height: 32px;
    margin-left: 0;
    padding-left: 0;
    margin-top: -4px;
  }

  .app-input-form-field {
    .app-suffix-search-icon-wrapper.app-icon-arrow {
      margin-top: 16px;
    }

    .app-suffix-search-icon-wrapper.app-close-button {
      height: 6px;

      .app-close-icon {
        font-size: 18px;
        line-height: 28px;
      }
    }

    &-input {
      caret-color: var(--theme-text-color);
    }
  }
}

/* stylelint-disable-next-line */
.app-search-options-menu.mat-mdc-menu-panel {
  position: relative;
  top: -5px;
  margin-top: 2px;
  background-color: var(--theme-dialog-background-color);
  width: $search-width;
  max-width: unset;
  border-radius: $search-border-radius;

  /* stylelint-disable-next-line */
  .mdc-list {
    padding-top: 10px;
    padding-right: 10px;
  }
}

.aca-search-input {
  width: 100%;
  max-width: $search-width;
  background-color: $search-background;
  border-radius: $search-border-radius;
  height: $search-height;
  margin-bottom: 0;
  padding-bottom: 26px;

  .app-search-container {
    margin: 10px 0 0 0;
  }
}

.app-search-control {
  margin-top: -$top-margin;
}

.app-search-options {
  color: var(--theme-text-color);
  border-top: 1px solid var(--theme-divider-color);
  padding: 20px 10px;
  font-size: 16px;
  letter-spacing: -0.7px;
  margin-bottom: -8px;
  margin-top: 23px;

  /* stylelint-disable-next-line */
 .mat-mdc-checkbox {
   .mdc-form-field {
     .mdc-checkbox {
       .mdc-checkbox__background {
         height: 18px;
         width: 18px;
       }
     }
   }
 }

 .app-search-options-checkbox label {
   max-width: 155px;
   font-size: 16px;
   padding-left: 6px;
   padding-top: 2px;
   letter-spacing: -1px;
 }

 &-checkbox {
   padding: 3px 36px 3px 20px;

   /* stylelint-disable-next-line no-descending-specificity */
    label {
      padding: 0 0 0 11px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.app-search-hint {
  position: absolute;
  font-size: 12px;
  padding-left: 17px;
}

@media screen and (max-width: 959px) {
  $search-width-small: 400px;

  .aca-search-input {
    max-width: $search-width-small;
  }

  .app-search-container {
    max-width: $search-width-small;
  }

  .app-search-options-menu {
    width: $search-width-small;
  }

  #search-options {
    padding-left: 20px;

    label {
      max-width: 105px;
    }

    .app-search-options-checkbox {
      padding: 3px 20px 3px 0;

      label {
        padding: 0;
      }
    }
  }
}

@media screen and (max-width: 599px) {
  $search-width-xsmall: 220px;

  .aca-search-input {
    max-width: $search-width-xsmall;
  }

  .app-search-container {
    max-width: $search-width-xsmall;
  }

  .app-search-options-menu {
    width: $search-width-xsmall;
  }

  #search-options label {
    max-width: 180px;
  }
}

@media screen and (max-width: 380px) {
  .aca-search-input {
    max-width: 148px;
  }
}