@use "../../../variables/index" as *;


/**
 * c8y login - Component styles
 *
 * Note: Uses $size-* tokens for spacing where applicable.
 *
 * Intentionally hardcoded values:
 * - Component-specific dimensions: Fixed sizes for component layout
 * - Off-grid spacing: Component-specific positioning
 * - Border widths (1px, 2px, 3px): Standard borders
 * - Font-sizes: Typography
 * - Percentages: Layout
 */
.password-strength {
  width: 180px;
  margin-bottom: $size-20;

  .table & {
    width: 100px;
    margin-left: auto;
    margin-right: auto;
  }
}

.password-strength>div {
  position: relative;
  width: 100%;
  height: 4px;
  overflow: hidden;
  background-color: $gray-90;
}

.password-strength>.password-strength-label {
  float: left;
  color: $component-form-label-color;
}

.password-green .password-bar,
.password-yellow .password-bar,
.password-red .password-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.password-green {
  .password-bar {
    width: 100%;
    background-color: var(--palette-status-success, var(--c8y-palette-status-success));
  }
}

.password-yellow {
  .password-bar {
    width: 50%;
    background-color: var(--palette-status-warning, var(--c8y-palette-status-warning));
  }
}

.password-red {
  .password-bar {
    width: 25%;
    background-color: var(--palette-status-danger, var(--c8y-palette-status-danger));
  }
}

.loading {
  max-width: 320px;
  height: auto;
  min-height: 300px;
  padding: $size-32;
  margin: auto;
  border-radius: 2px;

  // Note: LESS guard removed - was: & when not ($powered-by='')
  // Only apply powered-by image if variable is not empty
  @if $powered-by != '' {
    background-image: url($powered-by);
    padding-bottom: 120px;
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
  }

  @media (min-width: $screen-sm-min) {
    max-width: 400px;
    margin-top: 50px;
  }
}

.init-load {
  height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 320px;
}

.mainlogo {
  // Note: LESS guard removed - was: & when not($extending)
  background-image: $brand-logo-img;

  width: 100%;
  height: 110px;
  padding-bottom: $brand-logo-height;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
  display: block;
}

.mainlogo[src] {
  background: none;
  padding-bottom: 0;
}