/* Localization Components - Radzen Compatible Styles */

/* CSS Variables for consistent theming */
:root {
  --localization-gap: var(--rz-gap, 0.5rem);
  --localization-border-radius: var(--rz-border-radius-base, 0.25rem);
  --localization-transition: var(--rz-transition-all, all 0.2s ease);
  --localization-primary-color: var(--rz-primary, #1976d2);
  --localization-text-color: var(--rz-text-color, #212529);
  --localization-text-color-secondary: var(--rz-text-color-secondary, #6c757d);
  --localization-background-hover: var(--rz-base-200, #e9ecef);
  --localization-background-active: var(--rz-base-300, #dee2e6);
  --localization-success-color: var(--rz-success, #28a745);
  --localization-focus-outline: var(--rz-outline-focus, 2px solid var(--rz-primary));
}

/* LocalizedFieldGroup Styles */
.localized-field-group {
  display: flex;
  flex-direction: column;
  gap: var(--localization-gap);
}

.localized-field-group .language-selector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rz-spacing-1, 0.25rem);
}

.localized-field-group .language-selector.rz-text-align-center {
  justify-content: center;
}

.localized-field-group .language-selector.rz-text-align-end {
  justify-content: flex-end;
}

.localized-field-group .language-selector.rz-text-align-start {
  justify-content: flex-start;
}

.localized-field-group .language-link {
  display: inline-flex;
  align-items: center;
  padding: var(--rz-spacing-1, 0.25rem);
  margin: 0;
  border: none;
  background: transparent;
  color: var(--localization-text-color-secondary);
  border-radius: var(--localization-border-radius);
  cursor: pointer;
  transition: var(--localization-transition);
  font-family: inherit;
  font-size: inherit;
  text-decoration: none;
  outline: none;
  min-width: auto;
}

.localized-field-group .language-link:hover {
  background-color: transparent;
  color: var(--rz-primary, #007bff);
  opacity: 0.8;
}

.localized-field-group .language-link:focus-visible {
  outline: var(--localization-focus-outline);
  outline-offset: 2px;
}

.localized-field-group .language-link.active {
  background-color: transparent;
  color: var(--rz-primary, #007bff);
  font-weight: 600;
  border: 1px solid var(--rz-primary, #007bff);
}

/* LanguageSelector Styles */
.language-switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rz-spacing-1, 0.25rem);
}

.language-switcher .language-link {
  display: inline-flex;
  align-items: center;
  padding: var(--rz-spacing-1, 0.25rem);
  margin: 0;
  border: none;
  background: transparent;
  color: var(--localization-text-color-secondary);
  border-radius: var(--localization-border-radius);
  cursor: pointer;
  transition: var(--localization-transition);
  font-family: inherit;
  font-size: inherit;
  text-decoration: none;
  outline: none;
  min-width: auto;
}

.language-switcher .language-link:hover {
  background-color: transparent;
  color: var(--rz-primary, #007bff);
  opacity: 0.8;
}

.language-switcher .language-link:focus-visible {
  outline: var(--localization-focus-outline);
  outline-offset: 2px;
}

.language-switcher .language-link.active {
  background-color: transparent;
  color: var(--rz-primary, #007bff);
  font-weight: 600;
  border: 1px solid var(--rz-primary, #007bff);
}

/* LocalizedTextBox Styles */
.localized-textbox {
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  /*gap: var(--rz-spacing-2, 0.5rem);*/
}

.localized-textbox .input-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
}

.localized-textbox .localized-input-text {
  width: 100% !important;
  padding-left: calc(var(--rz-spacing-8, 2rem) + var(--rz-spacing-1, 0.25rem)) !important;
  padding-right: calc(var(--rz-spacing-7, 1.75rem) + var(--rz-spacing-1, 0.25rem)) !important;
}

.localized-textbox .flag-button {
  position: absolute;
  left: var(--rz-spacing-1, 0.25rem);
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--localization-text-color-secondary);
  z-index: 3;
  width: var(--rz-spacing-7, 1.75rem);
  height: var(--rz-spacing-5, 1.25rem);
  border-radius: var(--localization-border-radius);
  transition: var(--localization-transition);
  outline: none;
}

.localized-textbox .flag-button:hover {
  background-color: var(--localization-background-hover);
  color: var(--localization-text-color);
}

.localized-textbox .flag-button:focus-visible {
  outline: var(--localization-focus-outline);
  outline-offset: 2px;
}

.localized-textbox .clear-button {
  position: absolute;
  right: var(--rz-spacing-2, 0.5rem);
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--localization-text-color-secondary);
  z-index: 3;
  width: var(--rz-spacing-5, 1.25rem);
  height: var(--rz-spacing-5, 1.25rem);
  border-radius: var(--localization-border-radius);
  transition: var(--localization-transition);
  outline: none;
}

.localized-textbox .clear-button:hover {
  background-color: var(--localization-background-hover);
  color: var(--localization-text-color);
}

.localized-textbox .clear-button:focus-visible {
  outline: var(--localization-focus-outline);
  outline-offset: 2px;
}

.localized-textbox .language-selector,
.localized-textarea .language-selector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rz-spacing-1, 0.25rem);
  margin-top: var(--rz-spacing-1, 0.25rem);
  padding-inline: var(--rz-spacing-1, 0.25rem);
  padding-bottom: var(--rz-spacing-1, 0.25rem);
  box-sizing: border-box;
  margin-left: 0.1rem;
}

.localized-textbox .language-link,
.localized-textarea .language-link {
  display: inline-flex;
  align-items: center;
  padding: var(--rz-spacing-1, 0.25rem);
  margin: 0;
  border: none;
  background: transparent;
  color: var(--localization-text-color-secondary);
  border-radius: var(--localization-border-radius);
  cursor: pointer;
  transition: var(--localization-transition);
  font-family: inherit;
  font-size: inherit;
  text-decoration: none;
  outline: none;
  position: relative;
  min-width: auto;
}

.localized-textbox .language-link:hover,
.localized-textarea .language-link:hover {
  background-color: transparent;
  color: var(--rz-primary, #007bff);
  opacity: 0.8;
}

.localized-textbox .language-link:focus-visible,
.localized-textarea .language-link:focus-visible {
  outline: var(--localization-focus-outline);
  outline-offset: 2px;
}

.localized-textbox .language-link.active,
.localized-textarea .language-link.active {
  background-color: transparent;
  color: var(--rz-primary, #007bff);
  font-weight: 600;
  border: none;
}

.localized-textbox .content-indicator,
.localized-textarea .content-indicator {
  display: inline-block;
  font-size: var(--rz-text-xs-font-size, 0.75rem);
  color: var(--localization-success-color);
  margin-left: var(--rz-spacing-1, 0.25rem);
  position: relative;
  top: -1px;
}

/* LocalizedTextArea Styles */
.localized-textarea {
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  gap: var(--rz-spacing-2, 0.5rem);
}

.localized-textarea .input-wrapper {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  width: 100%;
}

.localized-textarea .localized-input-text {
  width: 100% !important;
  padding-left: calc(var(--rz-spacing-8, 2rem) + var(--rz-spacing-1, 0.25rem)) !important;
  padding-right: calc(var(--rz-spacing-7, 1.75rem) + var(--rz-spacing-4, 1rem)) !important;
  min-height: var(--rz-spacing-20, 5rem);
  resize: none;
  margin-bottom: 0.1rem;
}

.localized-textarea .flag-button {
  position: absolute;
  left: var(--rz-spacing-1, 0.25rem);
  top: var(--rz-spacing-2, 0.5rem);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--localization-text-color-secondary);
  z-index: 3;
  width: var(--rz-spacing-7, 1.75rem);
  height: var(--rz-spacing-5, 1.25rem);
  border-radius: var(--localization-border-radius);
  transition: var(--localization-transition);
  outline: none;
}

.localized-textarea .flag-button:hover {
  background-color: var(--localization-background-hover);
  color: var(--localization-text-color);
}

.localized-textarea .flag-button:focus-visible {
  outline: var(--localization-focus-outline);
  outline-offset: 2px;
}

.localized-textarea .clear-button {
  position: absolute;
  right: var(--rz-spacing-1, 0.25rem);
  top: var(--rz-spacing-2, 0.5rem);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--localization-text-color-secondary);
  z-index: 3;
  width: var(--rz-spacing-6, 1.5rem);
  height: var(--rz-spacing-6, 1.5rem);
  border-radius: var(--localization-border-radius);
  transition: var(--localization-transition);
  outline: none;
}

.localized-textarea .clear-button:hover {
  background-color: var(--localization-background-hover);
  color: var(--localization-text-color);
}

.localized-textarea .clear-button:focus-visible {
  outline: var(--localization-focus-outline);
  outline-offset: 2px;
}

/* Radzen FormField Integration */
.rz-form-field .localized-textbox,
.rz-form-field .localized-textarea {
  margin: 1px !important;
  outline: none !important;
  border: none !important;
  resize: none !important;
  box-shadow: none !important;
  box-sizing: content-box !important;
  margin-top: var(--rz-spacing-1, 0.25rem) !important;
  margin-bottom: 0; /*var(--rz-spacing-1, 0.25rem) !important*/;
  width: 100% !important;
}

.rz-form-field .localized-textbox .localized-input-text,
.rz-form-field .localized-textarea .localized-input-text {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0.1rem;
}

.rz-form-field .localized-textarea .input-wrapper {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.rz-form-field .localized-textarea .flag-button {
  top: calc(var(--rz-spacing-2, 0.5rem) + var(--rz-spacing-1, 0.25rem)) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  .localized-field-group .language-selector,
  .language-switcher,
  .localized-textbox .language-selector,
  .localized-textarea .language-selector {
    gap: 2px;
  }

  .localized-field-group .language-link,
  .language-switcher .language-link,
  .localized-textbox .language-link,
  .localized-textarea .language-link {
    padding: 2px 4px;
    font-size: var(--rz-text-sm-font-size, 0.875rem);
    min-width: 24px;
    height: 24px;
  }

  .localized-textbox .flag-button,
  .localized-textarea .flag-button {
    width: var(--rz-spacing-6, 1.5rem);
    height: var(--rz-spacing-4, 1rem);
  }
}

/* Dark Theme Support */
@media (prefers-color-scheme: dark) {
  :root {
    --localization-background-hover: var(--rz-base-700, #374151);
    --localization-background-active: var(--rz-base-600, #4b5563);
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .localized-field-group .language-link:focus-visible,
  .language-switcher .language-link:focus-visible,
  .localized-textbox .language-link:focus-visible,
  .localized-textarea .language-link:focus-visible,
  .localized-textbox .flag-button:focus-visible,
  .localized-textarea .flag-button:focus-visible,
  .localized-textbox .clear-button:focus-visible,
  .localized-textarea .clear-button:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
  }
}

/* Animation Performance Optimization */
.localized-field-group .language-link,
.language-switcher .language-link,
.localized-textbox .language-link,
.localized-textarea .language-link,
.localized-textbox .flag-button,
.localized-textarea .flag-button,
.localized-textbox .clear-button,
.localized-textarea .clear-button {
  will-change: background-color, color;
}

/* Print Styles */
@media print {
  .localized-textbox .flag-button,
  .localized-textarea .flag-button,
  .localized-textbox .clear-button,
  .localized-textarea .clear-button {
    display: none;
  }

  .localized-textbox .localized-input-text,
  .localized-textarea .localized-input-text {
    padding-left: var(--rz-spacing-2, 0.5rem) !important;
    padding-right: var(--rz-spacing-2, 0.5rem) !important;
    margin: 0.1rem;
    resize: none;
  }
}