/* 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/. */

@import url("chrome://global/skin/in-content/common.css");

:host {
  --background-term-a: #B3FFE3;
  --background-term-b: #80EBFF;
  --background-term-c: #FFEA80;
  --background-term-d: #FFB587;
  --background-term-f: #FF848B;
  --in-content-box-border-color: rgba(0, 0, 0, 0.15);
  --inner-border: 1px solid var(--in-content-box-border-color);
  --letter-grade-width: 1.5rem;
  --letter-grade-term-inline-padding: 0.25rem;
}

#letter-grade-wrapper {
  border-radius: 4px;
  color: #000;
  display: flex;
  font-weight: 600;
  line-height: 150%;
  margin: 0;
  overflow-wrap: anywhere;
}

#letter-grade-term {
  align-items: center;
  align-self: stretch;
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  font-size: 1em;
  justify-content: center;
  margin: 0;
  padding: 0.0625rem var(--letter-grade-term-inline-padding);
  text-align: center;
  width: var(--letter-grade-width);
}

:host([showdescription]) #letter-grade-term  {
  /* For border "shadow" inside the container */
  border-block: var(--inner-border);
  border-inline-start: var(--inner-border);
  border-start-start-radius: 4px;
  border-end-start-radius: 4px;
  /* Add 1px padding so that the letter does not shift when changing
   * between the show description and no description variants. */
  padding-inline-end: calc(var(--letter-grade-term-inline-padding) + 1px);
}

:host(:not([showdescription])) #letter-grade-term {
  border: var(--inner-border);
  border-radius: 4px;
}

#letter-grade-description {
  /* For border "shadow" inside the container */
  border-block: var(--inner-border);
  border-inline-end: var(--inner-border);
  border-start-end-radius: 4px;
  border-end-end-radius: 4px;

  align-items: center;
  align-self: stretch;
  box-sizing: border-box;
  display: flex;
  font-size: 0.87rem;
  font-weight: var(--font-weight);
  margin: 0;
  padding: 0.125rem 0.5rem;
}

/* Letter grade colors */

:host([letter="A"]) #letter-grade-term {
  background-color: var(--background-term-a);
}

:host([letter="A"]) #letter-grade-description {
  background-color: rgba(231, 255, 246, 1);
}

:host([letter="B"]) #letter-grade-term {
  background-color: var(--background-term-b);
}

:host([letter="B"]) #letter-grade-description {
  background-color: rgba(222, 250, 255, 1);
}

:host([letter="C"]) #letter-grade-term {
  background-color: var(--background-term-c);
}

:host([letter="C"]) #letter-grade-description {
  background-color: rgba(255, 249, 218, 1);
}

:host([letter="D"]) #letter-grade-term {
  background-color: var(--background-term-d);
}

:host([letter="D"]) #letter-grade-description {
  background-color: rgba(252, 230, 213, 1);
}

:host([letter="F"]) #letter-grade-term {
  background-color: var(--background-term-f);
}

:host([letter="F"]) #letter-grade-description {
  background-color: rgba(255, 228, 230, 1);
}

@media (prefers-contrast) {
  :host {
    --in-content-box-border-color: unset;
  }

  #letter-grade-term {
    background-color: var(--in-content-page-color) !important;
    color: var(--in-content-page-background) !important;
  }

  #letter-grade-description {
    background-color: var(--in-content-page-background) !important;
    color: var(--in-content-page-color) !important;
  }
}