@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html,
  body {
    @apply m-0 p-0 min-h-screen;
  }

  /* Load fluentui font */
  /* The URLs are observed in browser console */
  /* The font weights are from https://developer.microsoft.com/en-us/fluentui#/styles/web/typography */
  @font-face {
    font-family: "Segoe UI Web";
    src: url("//static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.woff2")
      format("woff2");
    font-weight: 400;
  }
  @font-face {
    font-family: "Segoe UI Web";
    src: url("//static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff2")
      format("woff2");
    font-weight: 600;
  }
  @font-face {
    font-family: "Segoe UI Web";
    src: url("//static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-bold.woff2")
      format("woff2");
    font-weight: 700;
  }

  body {
    font-family: "Segoe UI Web", -apple-system, BlinkMacSystemFont, "Segoe UI",
      "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  }

  /* NOTE(1) */
  /* The font-size of focusable elements must be >= 16px otherwise */
  /* Safari iOS will zoom the page. */

  /* Fluent UI color name <-> Shade */
  /* themeLighterAlt Shade.Shade1 */
  /* themeLighter    Shade.Shade2 */
  /* themeLight      Shade.Shade3 */
  /* themeTertiary   Shade.Shade4 */
  /* themeSecondary  Shade.Shade5 */
  /* themePrimary    Shade.Unshaded */
  /* themeDarkAlt    Shade.Shade6 */
  /* themeDark       Shade.Shade7 */
  /* themeDarker     Shade.Shade8 */

  input,
  select,
  textarea,
  button {
    /* NOTE(1) */
    font-size: inherit;
  }

  /* textarea by default has background color of white */
  /* In dark mode, the text color is also white */
  /* Therefore we have to reset the background color to transparent */
  textarea,
  input,
  select {
    @apply bg-transparent;
  }

  *:focus {
    @apply outline-none;
  }

  button {
    font-weight: inherit;
  }
  button:disabled {
    cursor: not-allowed;
  }

  a {
    @apply no-underline cursor-pointer;
  }

  select {
    @apply appearance-none;
  }

  /* Use 600 for heading */
  /* https://developer.microsoft.com/en-us/fluentui#/styles/web/typography */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-semibold;
  }

  b,
  strong {
    @apply font-semibold;
  }
}

@layer components {
  .twc-title-icon {
    @apply w-5 flex items-center;
  }

  .twc-container-vertical {
    @apply grid grid-cols-1 auto-rows-auto gap-y-5;
  }

  .as-btn {
    @apply flex flex-row justify-center items-center;
  }

  .btn.primary-btn,
  .btn.light-btn,
  .btn.destructive-btn {
    @apply rounded-sm px-5 py-1.5 text-center border border-solid border-transparent;
  }

  .btn.outlined-btn {
    @apply rounded-sm px-5 py-1.5 text-center border border-solid;
  }

  .primary-btn.outline {
    @apply border outline-none;
  }

  .btn.action-btn {
    @apply rounded-sm px-3 py-1 text-center;
  }

  .btn.sso-btn {
    @apply rounded-sm text-center;
  }

  .btn.wallet-btn {
    @apply rounded-sm text-center w-full;
  }

  /* Safari button cannot have display being set to other value */
  /* Therefore we have to wrap the content in a span */
  /* However, other sizing properties still need to be declared on the button itself */
  /* Otherwise, the content will overflow the button */
  .sso-btn-content {
    @apply block relative px-9 py-1.5;
  }

  .sso-btn-icon {
    @apply absolute top-0 left-0 w-9 h-9 bg-no-repeat bg-center;
    background-size: 50%;
  }

  .btn.passkey-btn {
    @apply rounded-sm text-center;
  }

  .passkey-btn-icon {
    @apply absolute top-0 left-0 w-9 h-9 text-lg flex items-center justify-center;
  }

  .passkey-btn-content {
    @apply block relative px-9 py-1.5;
  }

  .wallet-btn-content {
    @apply block relative px-9 py-1.5;
  }

  .wallet-btn-icon {
    @apply absolute top-0 left-0 w-9 h-9 bg-no-repeat bg-center;
    background-size: 50%;
  }

  .select {
    @apply rounded-none text-base py-1.5 pr-7 border border-solid;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: var(--color-text-shaded-2);
    border-left-color: transparent;
    background-image: url("./img/select.png");
    background-position: right 5px center;
    background-size: 12px auto;
    @apply bg-no-repeat;
  }
  .select.empty {
    color: var(--color-text-shaded-3);
  }
  .select:disabled {
    @apply opacity-40;
  }

  .textarea {
    @apply rounded-none text-base border border-solid;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: var(--color-text-shaded-3);
    border-left-color: transparent;
  }
  .textarea:disabled,
  .textarea:read-only {
    @apply opacity-40;
  }
  .textarea::placeholder {
    color: var(--color-text-shaded-3);
  }

  .text-input {
    @apply rounded-none py-1.5 text-base border border-solid;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: var(--color-text-shaded-3);
    border-left-color: transparent;
  }
  .text-input:disabled,
  .text-input:read-only {
    @apply opacity-40;
  }
  .text-input::placeholder {
    color: var(--color-text-shaded-3);
  }

  .modal {
    @apply fixed flex top-0 left-0 w-full h-full justify-center items-center transition-opacity duration-300;
  }
  .modal.closed {
    @apply opacity-0 pointer-events-none;
  }
  .modal-overlay {
    @apply absolute bg-gray-900 w-full h-full opacity-50;
  }
  .modal-container {
    @apply max-w-md z-50 mx-auto overflow-y-auto rounded-md;
    width: 95%;
    background-color: var(--color-pane-background);
    box-shadow: 0 4px 16px var(--color-pane-shadow);
  }
  .modal-content {
    @apply p-5 text-left;
  }
  .modal-title {
    @apply m-0 text-xl;
  }
  .modal-body {
    @apply mt-0 mb-5;
  }

  .password-input-wrapper .input {
    @apply pr-8 -mr-8;
  }

  .password-input-wrapper input::-ms-reveal,
  .password-input-wrapper input::-ms-clear {
    @apply hidden;
  }

  .phone-label.whatsapp-icon {
    @apply inline-block bg-no-repeat pl-7;
    background-position: left center;
    background-size: 24px;
  }

  .qr-overlay.whatsapp-icon {
    @apply bg-center bg-no-repeat;
    background-size: 40px;
  }

  .settings-security-item {
    @apply p-3 tablet:p-3 desktop:p-4 rounded-md flex flex-col space-y-2.5;
    @apply border border-solid;
  }

  .settings-add-btn {
    @apply p-5 text-sm w-full;
    text-align: inherit;
  }

  .banner-wrapper {
    @apply w-full flex justify-center;
    /* 16px is the banner default padding */
    /* 40px - 16px = 8px */
    /* 40px - 16px = 8px */
    @apply pt-6 pb-6;
    /* 80px - 16px = 48px */
    /* 64px - 16px = 32px */
    @apply tablet:pt-[66px] tablet:pb-12;
    /* 80px - 16px = 48px */
    /* 64px - 16px = 32px */
    @apply desktop:pt-[66px] desktop:pb-12;
  }

  .banner-frame {
    @apply flex justify-center items-center;
    @apply bg-transparent pt-4 pr-4 pb-4 pl-4;
  }
  .banner {
    @apply h-[55px];
    width: initial;
  }
  .banner.dark {
    @apply hidden;
  }
  .dark .banner.light {
    @apply hidden;
  }
  .dark .banner.dark {
    display: initial;
  }

  .dot-flashing {
    @apply relative w-1 h-1 rounded-sm;
    background-color: var(--color-text-unshaded);
    color: var(--color-text-unshaded);
    animation: dotFlashing 1s infinite linear alternate;
    animation-delay: 0.5s;
  }
  .dot-flashing::before,
  .dot-flashing::after {
    @apply inline-block absolute w-1 h-1 rounded-sm top-0;
    content: "";
    background-color: var(--color-text-unshaded);
    color: var(--color-text-unshaded);
    animation: dotFlashing 1s infinite alternate;
  }
  .dot-flashing::before {
    @apply -left-1.5;
    animation-delay: 0s;
  }
  .dot-flashing::after {
    @apply left-1.5;
    animation-delay: 1s;
  }
  @keyframes dotFlashing {
    0% {
      background-color: var(--color-text-unshaded);
    }
    50%,
    100% {
      background-color: var(--color-text-shaded-1);
    }
  }

  .password-strength-meter {
    @apply appearance-none block w-[266px] h-1;
  }
  .password-strength-meter::-webkit-meter-optimum-value,
  .password-strength-meter::-webkit-meter-suboptimum-value,
  .password-strength-meter::-webkit-meter-even-less-good-value {
    background: none;
  }
  .password-strength-meter,
  .password-strength-meter::-webkit-meter-bar {
    background: linear-gradient(
      90deg,
      var(--color-password-strength-meter-0) 0% 18.4%,
      transparent 18.4% 20.4%,
      var(--color-password-strength-meter-0) 20.4% 38.8%,
      transparent 38.8% 40.8%,
      var(--color-password-strength-meter-0) 40.8% 59.2%,
      transparent 59.2% 61.2%,
      var(--color-password-strength-meter-0) 61.2% 79.6%,
      transparent 79.6% 81.6%,
      var(--color-password-strength-meter-0) 81.6% 100%
    );
  }
  .password-strength-meter[value="1"],
  .password-strength-meter[value="1"]::-webkit-meter-bar {
    background: linear-gradient(
      90deg,
      var(--color-password-strength-meter-1) 0% 18.4%,
      transparent 18.4% 20.4%,
      var(--color-password-strength-meter-0) 20.4% 38.8%,
      transparent 38.8% 40.8%,
      var(--color-password-strength-meter-0) 40.8% 59.2%,
      transparent 59.2% 61.2%,
      var(--color-password-strength-meter-0) 61.2% 79.6%,
      transparent 79.6% 81.6%,
      var(--color-password-strength-meter-0) 81.6% 100%
    );
  }
  .password-strength-meter-description[data-value="1"] {
    color: var(--color-password-strength-meter-1);
  }
  .password-strength-meter[value="2"],
  .password-strength-meter[value="2"]::-webkit-meter-bar {
    background: linear-gradient(
      90deg,
      var(--color-password-strength-meter-2) 0% 18.4%,
      transparent 18.4% 20.4%,
      var(--color-password-strength-meter-2) 20.4% 38.8%,
      transparent 38.8% 40.8%,
      var(--color-password-strength-meter-0) 40.8% 59.2%,
      transparent 59.2% 61.2%,
      var(--color-password-strength-meter-0) 61.2% 79.6%,
      transparent 79.6% 81.6%,
      var(--color-password-strength-meter-0) 81.6% 100%
    );
  }
  .password-strength-meter-description[data-value="2"] {
    color: var(--color-password-strength-meter-2);
  }
  .password-strength-meter[value="3"],
  .password-strength-meter[value="3"]::-webkit-meter-bar {
    background: linear-gradient(
      90deg,
      var(--color-password-strength-meter-3) 0% 18.4%,
      transparent 18.4% 20.4%,
      var(--color-password-strength-meter-3) 20.4% 38.8%,
      transparent 38.8% 40.8%,
      var(--color-password-strength-meter-3) 40.8% 59.2%,
      transparent 59.2% 61.2%,
      var(--color-password-strength-meter-0) 61.2% 79.6%,
      transparent 79.6% 81.6%,
      var(--color-password-strength-meter-0) 81.6% 100%
    );
  }
  .password-strength-meter-description[data-value="3"] {
    color: var(--color-password-strength-meter-3);
  }
  .password-strength-meter[value="4"],
  .password-strength-meter[value="4"]::-webkit-meter-bar {
    background: linear-gradient(
      90deg,
      var(--color-password-strength-meter-4) 0% 18.4%,
      transparent 18.4% 20.4%,
      var(--color-password-strength-meter-4) 20.4% 38.8%,
      transparent 38.8% 40.8%,
      var(--color-password-strength-meter-4) 40.8% 59.2%,
      transparent 59.2% 61.2%,
      var(--color-password-strength-meter-4) 61.2% 79.6%,
      transparent 79.6% 81.6%,
      var(--color-password-strength-meter-0) 81.6% 100%
    );
  }
  .password-strength-meter-description[data-value="4"] {
    color: var(--color-password-strength-meter-4);
  }
  .password-strength-meter[value="5"],
  .password-strength-meter[value="5"]::-webkit-meter-bar {
    background: linear-gradient(
      90deg,
      var(--color-password-strength-meter-5) 0% 18.4%,
      transparent 18.4% 20.4%,
      var(--color-password-strength-meter-5) 20.4% 38.8%,
      transparent 38.8% 40.8%,
      var(--color-password-strength-meter-5) 40.8% 59.2%,
      transparent 59.2% 61.2%,
      var(--color-password-strength-meter-5) 61.2% 79.6%,
      transparent 79.6% 81.6%,
      var(--color-password-strength-meter-5) 81.6% 100%
    );
  }
  .password-strength-meter-description[data-value="5"] {
    color: var(--color-password-strength-meter-5);
  }

  .v2-avatar-placeholder {
    background-image: url("./img/v2_avatar_placeholder.svg");
  }

  .sso-btn-icon.google-icon {
    background-image: url("./img/icon-google.svg");
  }
  .sso-btn-icon.apple-icon {
    background-image: url("./img/icon-apple-light.png");
  }
  .sso-btn-icon.facebook-icon {
    background-image: url("./img/icon-facebook.svg");
  }
  .sso-btn-icon.github-icon {
    background-image: url("./img/icon-github.png");
  }
  .sso-btn-icon.linkedin-icon {
    background-image: url("./img/icon-linkedin.svg");
  }
  .sso-btn-icon.microsoft-icon {
    background-image: url("./img/icon-microsoft.svg");
  }
  .sso-btn-icon.wechat-icon {
    background-image: url("./img/icon-wechat.svg");
  }

  .metamask-icon {
    background-image: url("./img/icon-metamask.svg");
  }

  .destructive-btn {
    color: var(--color-white-shaded-8);
    background-color: var(--color-error-unshaded);
  }
  .destructive-btn:focus {
    background-color: var(--color-error-unshaded);
  }
  .destructive-btn:hover {
    background-color: var(--color-error-shaded-6);
  }
  .destructive-btn:active {
    background-color: var(--color-error-shaded-7);
  }
  .destructive-btn:disabled {
    background-color: var(--color-error-shaded-3);
  }

  .destructive-secondary-btn {
    color: var(--color-error-unshaded);
    background-color: transparent;
  }
  .destructive-secondary-btn:hover,
  .destructive-secondary-btn:focus {
    color: var(--color-error-shaded-4);
  }
  .destructive-secondary-btn:active {
    color: var(--color-error-shaded-7);
  }
  .destructive-secondary-btn:disabled {
    color: var(--color-error-shaded-1);
  }

  .footer-watermark {
    @apply inline-block h-[18px] w-[98px] bg-no-repeat bg-center;
    background-size: auto 18px;
    background-image: url("./img/watermark.svg");
  }

  .messages-bar .messages-txt {
    color: var(--color-black-shaded-4);
  }
  .messages-bar.errors {
    background-color: var(--color-error-shaded-2);
  }
  .messages-bar.success {
    background-color: var(--color-success-shaded-2);
  }

  .primary-txt {
    color: var(--color-text-unshaded);
  }
  .good-txt {
    color: var(--color-good);
  }
  .warn-txt {
    color: var(--color-warn);
  }
  .error-txt {
    color: var(--color-error-unshaded);
  }
  .page {
    background-color: var(--color-background-unshaded);
  }
  .border-color {
    border-color: var(--color-separator);
  }
  .recovery-code-list {
    background-color: var(--color-recovery-code-list-background);
  }

  .pane {
    @apply rounded-md border border-solid;
    box-shadow: 0 4px 8px 0 var(--color-pane-shadow);
    border-color: var(--color-pane-border);
    background-color: var(--color-pane-background);
  }
  .pane > :first-child {
    @apply rounded-t-md;
  }
  .pane > :last-child {
    @apply rounded-b-md;
  }

  .alternative-separator::before,
  .alternative-separator::after {
    @apply flex-1 h-px;
    content: "";
    background-color: var(--color-separator);
  }

  .row-sep:not(:last-child) {
    @apply border-b border-solid;
    border-color: var(--color-separator);
  }

  .signin-signup-link {
    @apply border-b-2 border-solid;
    border-color: var(--color-separator);
  }

  #loading-progress-bar {
    @apply fixed block top-0 left-0 h-[3px] z-[9999] opacity-0;
    background-color: var(--color-primary-unshaded);
    transition: width 300ms ease-out, opacity 150ms 150ms ease-in;
    transform: translate3d(0, 0, 0);
  }
  .turbo-progress-bar {
    background: var(--color-primary-unshaded);
  }

  .tutorial {
    @apply desktop:absolute desktop:w-[330px] desktop:top-5 desktop:right-5;
  }

  .whatsapp-icon {
    background-image: url("./img/icon-whatsapp.svg");
  }

  /* it is intended to apply padding to __page_frame.html only */
  /* but not __wide_page_frame.html */
  .page-header .no-banner {
    @apply py-4 px-0;
  }
}

@layer utilities {
  .divide-y > * + * {
    border-top-color: var(--color-separator);
  }
}
