@import '../app/shared/scss/_selected_theme_variables';
:host {
  min-height: 100vh;
  display: block;
  .main-body {
    margin-top: 50px;
  }
}

.issearchopen :host ::ng-deep .main-body {
  @media screen and (min-width: 320px) and (max-width: 768px) {
    margin-top: 48px;
  }
}

:host ::ng-deep.ngx-input-star-rating__btn {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
  width: 26px;
  height: 8px;
}

:host ::ng-deep.ngx-input-star-rating__btn svg {
  position: absolute;
  top: -12px;
  left: 5px;
}

:host ::ng-deep.ngx-input-star-rating__btn {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
  width: 26px;
  height: 8px;
}

:host ::ng-deep.ngx-input-star-rating__btn svg {
  position: absolute;
  top: -12px;
  left: 5px;
}

:host ::ng-deepngx-input-star-rating {
  display: inline-block;
  --color-star-default: #ddd;
  --color-star-highlight: #fe9700;
}

:host ::ng-deepngx-input-star-rating {
  display: inline-block;
  --color-star-default: #ddd;
  --color-star-highlight: #fe9700;
}

:host ::ng-deep.themebtnprimary {
  background: darken($theme-action-color, 30);
  &:focus {
    @include gradient-y(
      $start-color: $theme-action-color,
      $end-color: darken($theme-action-color, 40),
      $start-percent: 0%,
      $end-percent: 45%
    );
  }
  @include gradient-y(
    $start-color: $theme-action-color,
    $end-color: darken($theme-action-color, 40),
    $start-percent: 0%,
    $end-percent: 45%
  );
  color: $white;
  border: 1px solid darken($theme-action-color, 55);
  border-radius: 0.4rem;
  padding: 0.5rem;
  font-weight: 300 !important;
  box-shadow: 0px 2px 4.6px darken($theme-action-color, 25);
  width: 100%;
  color: $white;
  // font-family: "Roboto Regular";
  font-size: 1.4em;
  margin: 10px auto;
  text-transform: capitalize;
}

:host ::ng-deep.themebtnprimarybasic {
  &:focus {
    @include gradient-y(
      $start-color: $theme-action-color,
      $end-color: darken($theme-action-color, 40),
      $start-percent: 0%,
      $end-percent: 45%
    );
  }
  text-transform: capitalize;
  color: $white;
  border: 1px solid darken($theme-action-color, 55);
  box-shadow: 0px 2px 4.6px darken($theme-action-color, 25);
  &:focus {
    @include gradient-y(
      $start-color: $theme-action-color,
      $end-color: darken($theme-action-color, 40),
      $start-percent: 0%,
      $end-percent: 45%
    );
  }
  @include gradient-y(
    $start-color: $theme-action-color,
    $end-color: darken($theme-action-color, 40),
    $start-percent: 0%,
    $end-percent: 45%
  );
}

:host ::ng-deep.themebtnprimarysade {
  @include gradient-y(
    $start-color: $theme-action-color,
    $end-color: darken($theme-action-color, 30),
    $start-percent: 0%,
    $end-percent: 95%
  );
}

:host ::ng-deep.themebtndisable {
  @include gradient-y(
    $start-color: $gray-200,
    $end-color: $gray-600,
    $start-percent: 0%,
    $end-percent: 95%
  );
  box-shadow: 0px 2px 4.6px darken($gray-600, 25);
  border: 1px solid darken($gray-600, 55);
}

.btn:not(:disabled):not(.disabled):active,
.btn:not(:disabled):not(.disabled).active {
  @include gradient-y(
    $start-color: $theme-action-color,
    $end-color: darken($theme-action-color, 25),
    $start-percent: 0%,
    $end-percent: 80%
  );
}

.btn:not(:disabled):not(.disabled):active,
.btn:not(:disabled):not(.disabled).active {
  background-image: auto !important;
}

:host ::ng-deep .page-item.active .page-link {
  z-index: 1;
  color: $white;
  background-color: darken($theme-action-color, 55);
  border-color: darken($theme-action-color, 55);
}

:host ::ng-deep .page-link {
  color: $gray-900;
  &:hover {
    background-color: darken($theme-action-color, 25);
    border-color: darken($theme-action-color, 25);
  }
}
