/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --AT-viewport-padding: 24px;
  --AT-page-padding-block-start: 80px;
  --AT-page-padding-block-end: 32px;

  /* Provide defaults for when this page is viewed in "toolkit". */
  background-color: var(--background-color-canvas, #fff);
  color: var(--text-color, #15141a);

  /* Variables used in the page layout */
  --AT-input-padding: 20px;
  /* This is somewhat arbitrary, but works well for the current design. If the computed
     header height changes, this will need to be adjusted. */
  --AT-header-height: 156px;

  --AT-input-height: calc(clamp(300px, 100vh - var(--AT-header-height), 300px) - var(--AT-viewport-padding) * 2);

  --AT-content-width: calc(var(--AT-input-height) * 4.5);
  --AT-content-max: calc(100vw - var(--AT-viewport-padding) * 2);
}

body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  visibility: hidden;
  margin: 0;
  row-gap: var(--space-xlarge);
  padding: var(--AT-page-padding-block-start) var(--AT-viewport-padding) var(--AT-page-padding-block-end);
}

#about-translations-header {
  display: flex;
  flex-direction: column;
  width: min(var(--AT-content-width), var(--AT-content-max));
  margin: 0 auto;
  row-gap: var(--space-medium);
  align-items: flex-start;
  justify-content: flex-start;
}

#about-translations-logo-and-h1 {
  display: flex;
  align-items: start;
  justify-content: start;
  column-gap: var(--space-small);
}

#about-translations-logo {
  width: var(--icon-size-large);
  height: var(--icon-size-large);
}

#about-translations-h1 {
  margin: 0;
}

.about-translations-message-bar {
  display: none;
}

#about-translations-main-user-interface {
  display: none;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-medium);
  width: min(var(--AT-content-width), var(--AT-content-max));
  margin: 0 auto;
}

.about-translations-select {
  font-size: var(--font-size-large);
  width: 100%;
  margin: 0;
}

#about-translations-swap-languages-button[type~="icon"]::part(button) {
  width: var(--size-item-xlarge);
  height: var(--size-item-xlarge);
  transform: rotate(90deg) scaleX(-1);
  background-image: url("chrome://global/skin/icons/arrows-updown.svg");
  background-size: var(--size-item-medium);
}

#about-translations-input-section {
  width: 100%;
  height: var(--AT-input-height);
  max-height: var(--AT-input-height);
  min-height: calc(var(--AT-input-height) * 0.5);
}

.about-translations-textarea {
  width: 100%;
  height: var(--AT-input-height);
  min-height: var(--AT-input-height);
  margin: 0;
  padding: var(--AT-input-padding);
  overflow: hidden;
  resize: none;
}

#about-translations-empty-section {
  width: auto;
  height: auto;
}

@media (max-width: 1200px) {
  :root {
    --AT-page-padding-block-start: 32px;
  }

  #about-translations-main-user-interface {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto 1fr 1fr;
    margin: 0;
    width: 100%;
    gap: var(--space-medium);
    max-width: calc(100vw - var(--AT-viewport-padding) * 2);
  }

  #about-translations-header {
    margin: 0;
    width: 100%;
    max-width: calc(100vw - var(--AT-viewport-padding) * 2);
  }

  #about-translations-source-select {
    grid-column: 1;
    grid-row: 1;
  }
  #about-translations-swap-languages-button {
    grid-column: 2;
    grid-row: 1;
  }
  #about-translations-target-select {
    grid-column: 3;
    grid-row: 1;
  }

  #about-translations-empty-section {
    display: none;
  }

  #about-translations-input-section {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  #about-translations-target-textarea {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}
