@import "../../../../../libs/components/src/tw-theme-preflight.css";

@layer base {
  html {
    overflow: hidden;
    min-height: 600px;
    height: 100%;

    &.body-sm {
      min-height: 500px;
    }

    &.body-xs {
      min-height: 400px;
    }

    &.body-xxs {
      min-height: 300px;
    }

    &.body-3xs {
      min-height: 240px;
    }

    &.body-full {
      min-height: unset;
      width: 100%;
      height: 100%;

      & body {
        width: 100%;
      }
    }
  }

  html.browser_safari {
    &.safari_height_fix {
      body {
        height: 360px !important;

        &.body-xs {
          height: 300px !important;
        }

        &.body-full {
          height: 100% !important;
        }
      }
    }

    app-root {
      border-width: 1px;
      border-style: solid;
      border-color: #000000;
    }

    &.theme_light app-root {
      border-color: #777777;
    }
  }

  body {
    width: 480px;
    height: 100%;
    position: relative;
    min-height: inherit;
    overflow: hidden;
    @apply tw-bg-background-alt;
  }

  /**
   * Workaround for slow performance on external monitors on Chrome + MacOS
   * See: https://bugs.chromium.org/p/chromium/issues/detail?id=971701#c64
   */
  @keyframes redraw {
    0% {
      opacity: 0.99;
    }
    100% {
      opacity: 1;
    }
  }
  html.force_redraw {
    animation: redraw 1s linear infinite;
  }

  /**
   * Text selection style:
   * suppress user selection for most elements (to make it more app-like)
   */
  h1,
  h2,
  h3,
  label,
  a,
  button,
  p,
  img {
    user-select: none;
  }
}

@layer components {
  /** Safari Support */
  html.browser_safari .tw-styled-scrollbar::-webkit-scrollbar {
    @apply tw-overflow-auto;
  }
  html.browser_safari .tw-styled-scrollbar::-webkit-scrollbar-thumb {
    @apply tw-bg-secondary-500 tw-rounded-lg tw-border-4 tw-border-solid tw-border-transparent tw-bg-clip-content;
  }
  html.browser_safari .tw-styled-scrollbar::-webkit-scrollbar-track {
    @apply tw-bg-background-alt;
  }
  html.browser_safari .tw-styled-scrollbar::-webkit-scrollbar-thumb:hover {
    @apply tw-bg-secondary-600;
  }

  /* FireFox & Chrome support */
  html:not(.browser_safari) .tw-styled-scrollbar {
    scrollbar-color: rgb(var(--color-secondary-500)) rgb(var(--color-background-alt));
  }

  #duo-frame {
    background: url("../images/loading.svg") 0 0 no-repeat;
    width: 100%;
    height: 470px;
    margin-bottom: -10px;

    iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
  }

  #web-authn-frame {
    width: 100%;
    height: 40px;

    iframe {
      border: none;
      height: 100%;
      width: 100%;
    }
  }

  body.linux-webauthn {
    width: 485px !important;
    #web-authn-frame {
      iframe {
        width: 375px;
        margin: 0 55px;
      }
    }
  }

  app-root > #loading {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;

    @apply tw-text-muted;
  }

  /**
   * Text selection style:
   * Set explicit selection styles (assumes primary accent color has sufficient
   * contrast against the background, so its inversion is also still readable)
   */
  :not(bit-form-field input)::selection {
    @apply tw-text-contrast;
    @apply tw-bg-primary-700;
  }
}
