@import '../../../styles/mixins';

$short-container-max-height: 480px;
$short-container-min-height: 320px;
$follow-modal-width: 300px;

.offlineContainer {
  --text-color: rgb(255 255 255 / 100%);

  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgb(18 22 29 / 0%) 0%, rgb(18 22 29 / 75%) 100%),
    radial-gradient(circle, rgb(18 22 29 / 0%) 0%, rgb(18 22 29 / 50%) 100%),
    linear-gradient(to bottom, rgb(122 92 243 / 100%) 0%, rgb(35 134 226 / 100%) 100%),
    linear-gradient(rgb(240 243 248 / 100%), rgb(240 243 248 / 100%));
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 16px;

  @include screen(mobile) {
    font-size: 12px;
  }

  @media (height <= $short-container-max-height) {
    font-size: 12px;
  }

  /* Content */
  .content {
    color: var(--text-color);
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    gap: clamp(15px, 7vh, 50px);
    padding: 24px;
    text-align: center;
    width: 100vw;
    height: 100vh;
    max-width: 1024px;
    max-height: 576px;
    justify-content: center;

    .headerContainer {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      margin: 0;
      font-size: clamp(1em, 1.5em, 5vh);
    }

    .messageContainer {
      width: 100%;

      --description-height: auto;

      @media (height <= $short-container-min-height) {
        --description-height: 30vh;

        margin: 0;
      }

      min-height: var(--description-height);

      --gradient-mask: linear-gradient(to top, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%) 17%);

      overflow: hidden;
      overflow-y: auto;
      max-height: var(--description-height);
      mask-image: var(--gradient-mask);
      mask-repeat: repeat-x;
      mask-size: auto var(--description-height);
      mask-position: top;
      padding-bottom: 0.5rem;
    }

    /* Message */
    .message {
      color: var(--text-color);
      font-family: var(--theme-text-body-font-family);
      font-style: normal;
      font-size: clamp(1em, 4.8vh, 20px);
      line-height: clamp(1.3em, 8vh, 35px);
      letter-spacing: 0;
      text-decoration: none;
      text-transform: none;
      display: block;
      margin: auto;
      margin-top: 2vh;

      @include screen(desktop) {
        width: 80%;
      }
    }

    /* Heading */
    .offlineTitle {
      color: var(--text-color);
      font-family: var(--theme-text-display-font-family);
      font-style: normal;
      font-size: clamp(1.3em, 5vh, 2em);
      font-weight: 600;
      line-height: 1.125;
      letter-spacing: -0.125px;
      text-decoration: none;
      text-transform: none;
      margin: 0;
    }

    /* Page Logo */
    .pageLogo {
      position: relative;
      min-height: 3em;
      min-width: 3em;
      max-height: 100px;
      max-width: 100px;
      border-radius: 96px;
      background-color: rgb(255 255 255 / 100%);
      border: 2px solid rgb(18 22 29 / 100%);
      display: flex;
      flex-flow: row nowrap;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 0;
      padding: 10px;
      background-size: cover;
      background-position: center;
    }

    /* Stream Name */
    .streamName {
      color: var(--text-color);
      font-family: var(--theme-text-display-font-family);
      font-style: normal;
      font-size: 1.25em;
      font-weight: 500;
      line-height: 1.1875;
      letter-spacing: -0.0625px;
      text-decoration: none;
      text-transform: none;
      text-align: left;
    }

    .followButton {
      display: none;

      @media (width > $follow-modal-width) {
        display: block;
      }
    }
  }
}