/**
 * references.css
 *
 * Reference styles across the site from other sites.
 */

/* Untappd */

.untappdLogo {
    filter: invert(85%) sepia(38%) saturate(4433%) hue-rotate(357deg) brightness(102%) contrast(107%);
}

.untappdFontColor {
    color: #ffc000;
}

/* Apple and Android */

.appStoreLogo {
    background-color: white;
    border-radius: 10px;
}

/* Samsung */

/*
 * A toast is a Samsung Tizen TV concept of a brief popup
 * message that requires no confirmation and only appears
 * for 3 seconds. Samsung requires the background behind
 * the toast is NOT dimmed like popup messages.
 *
 * Cheatsheet:
 *
 * Title 56 point, 48 partial title, 42 thumbnail subtitle,
 * 38 list and button, 34-48 body, 30-42 thumbnail small
 * info 1, 26-36 thumbnail small info 2, 20-28 small info 3
 * disclaimers.
 * Leading Guide - font 26 leading 36, font 30 leading 42,
 * font 34 leading 48
 * Colors: warning #F89100, point #00BCFA, selected text #3EAEFE
 *
 * Toast Reference: https://developer.samsung.com/one-ui-watch-tizen/ui-components/toasts.html
 * Timing Reference: https://developer.samsung.com/smarttv/design/apps-screen.html
 * Example Reference: https://www.w3schools.com/howto/howto_css_overlay.asp
 */
 #toast {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    cursor: pointer;
    user-select: none;
}

#toastText {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 2vh 4vw;
    text-align: center;
    font-size: 5vh;
    background-color: mediumpurple;
    color: white;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    user-select: none;
}

/* A serious emphasizes the toast to stand out. */
.toastTextSeriousError {
    color: #F89100;
    background-color: indigo !important;
}

/*
 * Samsung font guidelines https://developer.samsung.com/smarttv/design/apps-screen.html
 */
.samsung-font-title {
    font-size: 56px;
    line-height: 1.2;
}

.samsung-font-partial-title {
    font-size: 48px;
    line-height: 1.2;
}

.samsung-font-thumbnail-subtitle {
    font-size: 42px;
    line-height: 1.2;
}

.samsung-font-list-and-button, .modalButton {
    font-size: 38px;
    line-height: 1.2;
}

.samsung-font-body-max, .modalHeader {
    font-size: 48px;
    line-height: 1.2;
}

.samsung-font-body-average {
    font-size: 41px;
    line-height: 1.2;
}

.samsung-font-body-min, .modalBody, .login-info-absolute {
    font-size: 34px;
    line-height: 48px;
}

.samsung-font-small-info1-max {
    font-size: 42px;
    line-height: 1.2;
}

.samsung-font-small-info1-average {
    font-size: 36px;
    line-height: 1.2;
}

.samsung-font-small-info1-min {
    font-size: 30px;
    line-height: 42px;
}

.samsung-font-small-info2-max {
    font-size: 36px;
    line-height: 1.2;
}

.samsung-font-small-info2-average {
    font-size: 31px;
    line-height: 1.2;
}

.samsung-font-small-info2-min {
    font-size: 26px;
    line-height: 36px;
}

/* Limited use for info3 such as disclaimers */

.samsung-font-small-info3-max {
    font-size: 28px;
    line-height: 1.2;
}

.samsung-font-small-info3-average {
    font-size: 24px;
    line-height: 1.2;
}

.samsung-font-small-info3-min {
    font-size: 20px;
    line-height: 1.2;
}

/* Samsung font colors */

.samsung-font-color-normal {
    color: white;
}

.samsung-font-color-warning {
    color: #F89100;
}

.samsung-font-color-point {
    color: #00BCFA;
}

.samsung-font-color-selected, .samsung-control-channel-button:focus, .samsung-play-button-border:focus {
    color: #3EAEFE;
}

/* Samsung button colors */

.samsung-button, .samsung-button-no-hover-focus {
    background-color: indigo;
}

.samsung-button:hover:enabled, .samsung-button:focus {
    background-color: mediumpurple;
}

/* Loading Screen - Samsung wants it visible after 100ms */

#samsung-loading {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
    user-select: none;
}

.samsung-loading-visuals {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 2vh 4vw;
    color: white;
    font-size: 26px;
    text-align: center;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    user-select: none;
}

/* TV Controls */

.samsung-tv-controls {
    position: fixed;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 1em;
    z-index: 3;
    background-color: mediumpurple; /* Same as Toast */
    transform: translateX(-50%);
    left: 50%;
    top: 1vh;
    width: 90%;
    max-width: 90%;
}

.samsung-card-controls {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 30vw;
    height: 40vh;
    padding: 2vh 4vw;
    color: white;
    background-color: mediumpurple;
    font-size: 26px;
    text-align: center;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    z-index: 3;
}

/*
   The button changes from play to pause as needed.
   On a computer this is typically with the mouse which
   includes the hover styles. On the TV and with the
   tab key on the computer this includes the focus
   styles.

  The inner triangle for the play button.
*/
.samsung-play-button {
    border: 0;
    background: transparent;
    box-sizing: border-box;
    width: 0;
    height: 70%;
    border-color: transparent transparent transparent white; /* Cannot be changed with hover/focus */
    transition: 100ms all ease;
    cursor: pointer;
    border-style: solid;
    border-width: 12px 0 12px 26px;
    margin: 5px;
  }

  /* The inner parallel lines for the pause button */
  .samsung-play-button.paused {
    border-style: double;
    border-width: 0px 0 0px 26px;
    margin: 5px;
  }

  /*
     The border is the fill area around the play
     triangle or the pause parallel lines.
  */
  .samsung-play-button-border {
    border: 1px darkgray solid;
    margin: 3px;
    background-color: darkgray;
  }

  .samsung-play-button-border:hover {
    background-color: #3EAEFE;
  }

  .samsung-play-button-border:focus-visible {
    background-color: #3EAEFE;
  }

  .samsung-play-button-border.paused {
    background-color: darkgray;
  }

  .samsung-play-button-border.paused:hover {
    background-color: #3EAEFE;
  }

  .samsung-play-button-border.paused:focus-visible {
    background-color: #3EAEFE;
  }

  .samsung-control-mouse-sensing-area {
    width: 100%;
    height: 15%;
    z-index: 1;
    position: fixed;
  }

  .samsung-card-control-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5em;
  }

  .samsung-control-channel-button {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: normal;
    text-decoration: none;
    padding: 0.5rem 1rem;
    width: 95%;
    font-size: 1em;
    text-decoration: none;
    line-height: 1.2;
    cursor: pointer;
    transition: 0.2s;
    will-change: transform;
    background-color: white;
  }

  .samsung-control-channel-button:focus {
    background-color: lightgray;
  }

  .samsung-control-channel-button:focus-visible {
    outline: none;
  }

  .samsung-control-channel-button:active {
    transform: translateY(2px);
  }