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

$search-width: 594px;
$search-height: 40px;
$search-background: #f5f6f5;
$search-border-radius: 4px;
$top-margin: 12px;

.app-search-container {
  color: var(--theme-foreground-text-color);

  .app-input-form-field {
    .mat-input-element {
      caret-color: var(--theme-text-color);

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

  .mat-focused label.mat-form-field-label {
    display: none;
  }
}

.app-search-options-menu {
  &.mat-menu-panel {
    background-color: var(--theme-dialog-background-color);
    width: $search-width;
    max-width: unset;
    border-radius: $search-border-radius;
    margin-top: $top-margin;
  }

  .mat-menu-content:not(:empty) {
    padding-top: 0;
    padding-bottom: 0;
  }
}

#search-options {
  color: var(--theme-text-color);
  border-top: 1px solid var(--theme-divider-color);
}

mat-checkbox {
  .mat-checkbox-frame {
    border-color: var(--theme-text-color);
  }
}

.aca-search-input {
  width: 100%;
  max-width: $search-width;
  background-color: $search-background;
  border-radius: $search-border-radius;
  height: $search-height;
}

.app-search-container {
  width: 100%;
  max-width: $search-width;
  height: $search-height + $top-margin;
}

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

#search-options {
  padding: 20px 0;
  font-size: 16px;
  letter-spacing: -0.7px;

  mat-checkbox {
    padding: 3px 24px 3px 19px;

    .mat-checkbox-inner-container {
      height: 18px;
      width: 18px;
    }

    .mat-checkbox-label {
      padding: 0 0 0 11px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .mat-checkbox-layout {
    max-width: 155px;
  }
}

.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 {
    &.mat-menu-panel {
      width: $search-width-small;
    }
  }

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

    mat-checkbox {
      padding: 3px 20px 3px 0;

      .mat-checkbox-label {
        padding: 0;
      }
    }

    .mat-checkbox-layout {
      max-width: 105px;
    }
  }
}

@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 {
    &.mat-menu-panel {
      width: $search-width-xsmall;
      margin-top: 9px;
    }
  }

  #search-options .mat-checkbox-layout {
    max-width: 180px;
  }
}

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