/* || Global Styling */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "JetBrains Mono", sans-serif, serif;
}

/* Colours */

:root {
  --White: #fff;
  --Black: #000;
  --Grey-950: #08070b;
  --Grey-900: #14131b;
  --Grey-850: #18171f;
  --Grey-800: #24232c;
  --Grey-700: #54535b;
  --Grey-600: #817d92;
  --Grey-200: #e6e5ea;
  --Green-200: #a4ffaf;
  --Yellow-300: #f8cd65;
  --Orange-400: #fb7c58;
  --Red-500: #f64a4a;
  --Red-Error: hsl(0, 68%, 91%);
  --Gradient: linear-gradient(90deg, #14131b, #08070b);
}

/* || Main Styling */

/* Group Settings */

body {
  background-color: var(--Grey-950);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  position: relative;
  margin: 4rem 1rem;
  min-width: 21rem;
  max-width: 33rem;
  width: 100%;
}

.password-display,
.password-settings {
  background-color: var(--Grey-800);
  padding: 1rem;
}

.password-value,
h2,
.checkbox-text,
.strength-word {
  color: var(--Grey-200);
}

/* Heading */

h1 {
  color: var(--Grey-600);
  font-size: 1rem;
  margin-bottom: 1rem;
  text-align: center;
}

/* Password Display Container */

.password-display {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.password-value {
  font-size: 1.2rem;
}

.copy-icon {
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.1s ease-in-out;
}

.copy-icon:hover {
  opacity: 1;
}

.copy-icon:active {
  opacity: 0.7;
}

/* Password Settings Container */

h2 {
  font-size: 1rem;
}

.character-length {
  margin-bottom: 2rem;
}

.character-length-text {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.character-length-amount {
  color: var(--Green-200);
  font-size: 1.5rem;
}

/* Slider Styling */

input[type="range"] {
  accent-color: var(--Green-200);
  cursor: pointer;
  background: var(--Grey-850);
  border-radius: 0.2rem;
  width: 100%;
}

/* Checkbox Container */

.checkbox-container {
  margin-bottom: 2rem;
}

.checkbox-option-container {
  align-items: center;
  display: flex;
  margin-bottom: 1rem;
}

.checkbox {
  appearance: none;
  border: 0.1rem solid var(--White);
  cursor: pointer;
  height: 1.25rem;
  margin-right: 1rem;
  width: 1.25rem;
}

.checkbox-checked {
  background-image: url(./starter-code/assets/images/icon-check.svg);
  background-size: cover;
  background-color: var(--Green-200);
  border-color: var(--Green-200);
}

/* Strength Container */

.strength-container {
  align-items: center;
  background-color: var(--Grey-850);
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 1rem;
}

.strength-title {
  color: var(--Grey-600);
}

.strength-word {
  font-size: 1.125rem;
}

.strength-value-container {
  display: flex;
  gap: 1rem;
}

.strength-bar-container {
  display: flex;
  gap: 0.5rem;
}

.strength-bar {
  border: 0.1rem solid var(--Grey-200);
  height: 1.75rem;
  width: 0.8rem;
}

.strength-bar-selected {
  background-color: var(--Yellow-300);
  border-color: var(--Yellow-300);
}

/* Generate Button */

.button {
  cursor: pointer;
  background-color: var(--Green-200);
  border: none;
  height: 3.5rem;
  padding: 1rem 0;
  opacity: 1;
  transition: all 0.2s ease-in-out;
  width: 100%;
}

.button:hover {
  color: var(--Green-200);
  background-color: var(--Grey-800);
  border: 0.1rem solid var(--Green-200);
}

.button:active {
  opacity: 0.7;
}

.button-text {
  align-items: center;
  color: var(--Grey-800);
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.button:hover .button-text {
  filter: brightness(0) saturate(100%) invert(100%) sepia(66%) saturate(500%)
    hue-rotate(138deg) brightness(87%) contrast(90%);
}

/* || Error Message */

.error-container {
  background-color: var(--Red-Error);
  color: var(--Red-500);
  opacity: 0;
  padding: 1rem;
  position: absolute;
  text-align: center;
  transition: opacity 0.2s ease-in-out;
  width: 100%;
}

.error-container-unhide {
  opacity: 1;
}

.error-message {
  margin-bottom: 0.5rem;
}

.close-error {
  background-color: var(--Red-500);
  border: none;
  color: var(--White);
  cursor: pointer;
  padding: 0.5rem 1rem;
  opacity: 0.7;
  transition: opacity 0.2s ease-in-out;
}

.close-error:hover {
  opacity: 1;
}

.close-error:active {
  opacity: 0.7;
}