.Widget[data-internal-name='com.psddev.translation.page.TranslationTab']
  > .inputContainer {
  @apply p-4;

  .inputLabel {
    @apply mb-1.5 text-sm font-semibold;
  }
}

.Widget[data-internal-name='com.psddev.translation.page.TranslationTab'] > br {
  @apply hidden;
}

/* Actions dropdown menus */
.TranslationsTab-actionsToggle {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon before:btu-icon-ellipsis;
}

.TranslationsTab-actionsToggle.is-active {
  @apply btu-button-pressed before:btu-icon before:btu-icon-x;
}

.TranslationsTab-actions {
  @apply Dropdown;
}

.TranslationsTab-actions [role='menuitem'] {
  @apply Dropdown-item;
}

.TranslationsTab-actions.is-open {
  @apply Dropdown-is-open;
}

/* Translation frame, filters, & controls */
.TranslationFrame {
  @apply flex flex-col border-t;
}

.TranslationFrame-controls {
  @apply flex gap-2 overflow-x-auto p-4;
}

.TranslationFrame-filters {
  @apply order-1 flex shrink-0;
}

.TranslationFrame-filters > .ComboInput:not(:last-child) {
  @apply me-2;
}

/* Bulk actions three dot menu */
.TranslationFrame-controls [name='BulkActions'] {
  @apply order-2;

  .TranslationsTab-actionsToggle {
    @apply btu-button-outline;
  }
}

/* Make table scrollable horizontally */
.TranslationFrame-controls + .NestedForm {
  @apply mb-4 overflow-x-auto;
}

/* Source Modified status */
.TranslationTable-updated > b {
  @apply font-normal text-warning-600;
}

/* Error status */
.TranslationTable-errors {
  @apply text-error-600;

  a {
    @apply text-error-600;
  }
}

.TranslationTable-errorLabel,
.TranslationTable-sourceLabel,
.TranslationTable-statusLabel {
  @apply italic;
}

.TranslationTable-sourceLabel + a {
  @apply text-sm text-gray-700 no-underline hover:text-gray-900 hover:underline focus:text-gray-700;
}

.TranslationReadOnlyTargetLocales > li {
  @apply pb-2;
}

/* Styles specific to Translations being in the right rail */
.ContentEdit-right .TranslationFrame .LinkTable {
  @apply mt-0;
}

/* Styles specific to Translations being a tab */
.Tab[data-tab='Translations'] {
  @apply -mx-[var(--space)] w-[calc(100%_+_var(--space)_*_2)];

  .inputContainer {
    @apply m-4;
  }

  > br {
    @apply hidden;
  }
}

/* "Translate This..." popup */
.ActionBar .Button.is-btu-button-gray {
  @apply !btu-button-gray;
}
