:root {
  --background-light: rgba(0, 0, 0, 0.08);
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --background-light: rgba(255, 255, 255, 0.08);
  }
}

[data-theme=light] {
  --background-light: rgba(0, 0, 0, 0.08);
}

[data-theme=dark] {
  --background-light: rgba(255, 255, 255, 0.08);
}

sl-copy-button {
	display: flex;
	border: 1px solid var(--tblr-border-color);
	border-left: none;
}

sl-copy-button::part(button) {
	padding-inline: 20px;
}

.screenings.show,
.screenings.verification,
.screenings.registration,
.screening_attempts.completed,
.screening_attempts.show,
.invitations {
  main {
    margin-top: var(--sl-spacing-3x-large);
  }

  .logo {
    display: block;
    margin-top: var(--sl-spacing-2x-large);
    text-align: center;
  }

  .logo img {
    filter: grayscale(1);
    max-width: 140px;
    opacity: 0.6;
  }
}

.fullscreen {
  height: auto;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  main {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    font-size: 1.2em;

    @media (max-width: 575px) {
      width: 100%;
    }
  }

  .exam_session_answers & main {
    min-width: 768px;
  }

  article header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    efp-timer {
      --progress-ring-size: 70px;

      line-height: 0;

      @media (max-width: 575px) {
        --progress-ring-size: 55px;
      }
    }

    .details {
      display: flex;
      align-items: center;

      .item {
        text-align: center;
        margin: var(--sl-spacing-medium);

        > div {
          &:first-child {
            font-size: 1.6em;
          }
        }
      }
    }

    @media (max-width: 400px) {
      nav {
        display: none;
      }
    }
  }

  .title {
    font-weight: normal;
    margin-bottom: var(--sl-spacing-large);
  }

  .body {
    min-height: 40vh;

    @media (min-width: 576px) {
      max-height: 60vh;
      overflow: scroll;
    }
  }

  article footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    &.exam {
      flex-direction: row-reverse;

      @media (max-width: 400px) {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--sl-spacing-small);

        button {
          order: 1;
        }

        div {
          display: flex;
          order: 2;
          gap: var(--sl-spacing-small);
          margin-inline: 4rem;
        }
      }
    }

    button {
      width: auto;
      margin-bottom: 0;
    }

    @media (max-width: 767px) {
      flex-direction: column-reverse;
      gap: var(--sl-spacing-medium);

      form {
        display: block;
      }

      [role="button"], form, .cta-button {
        width: 100%;
      }

      #iflags .button_to {
        margin-bottom: var(--sl-spacing-x-small);
      }

      #iflags:only-child .button_to {
        margin-bottom: 0;
      }

      button[type="submit"] {
        opacity: 0.5;
        pointer-events: none;
      }
    }
  }
}