/*!
 * Copyright (c) 2014-2025 Bjoern Kimminich & the OWASP Juice Shop contributors.
 * SPDX-License-Identifier: MIT
 */

$star-off: #c8c8c8;
$star-on: #ffd700;

mat-card {
  height: auto;
  min-width: 320px;
  width: 30%;
}

.form-container {
  display: flex;
  flex-direction: column;
  position: relative;
}

.rating-container {
  align-items: center;
  display: flex;
  margin-bottom: 15px;
  margin-top: 15px;
}

::ng-deep .mat-mdc-slider {
  --mdc-slider-handle-color: var(--theme-accent);
  --mdc-slider-focus-handle-color: var(--theme-accent);
  --mdc-slider-hover-handle-color: var(--theme-accent);
  --mdc-slider-active-track-color: var(--theme-accent);
  --mdc-slider-inactive-track-color: var(--theme-accent-fade-30);
  --mdc-slider-with-tick-marks-active-container-color: var(--theme-background);
  --mdc-slider-with-tick-marks-inactive-container-color: var(--theme-background-darker);
}

::ng-deep .mat-mdc-slider .mdc-slider__thumb-knob {
  background-color: var(--theme-accent) !important;
  border-color: var(--theme-accent) !important;
}

::ng-deep .mat-mdc-slider .mdc-slider__tick-marks {
  background-size: 25% 2px !important;
}

::ng-deep .mat-mdc-slider .mdc-slider__thumb-label {
  background-color: var(--theme-accent);
  color: var(--theme-background);
}

mat-hint {
  color: var(--theme-text-fade-40);
  font-size: 0.85em; 
}

.star {
  color: $star-off;
}

.active {
  color: $star-on;
}

.select {
  color: $star-on;
}

:host ::ng-deep .br {
  margin: 0 !important;
}

#submitButton {
  margin-left: 20%;
  margin-top: 30px;
  width: 60%;
}
