@tailwind components;

@layer components {
  :root {
    --color-primary-unshaded: #176df3;
    --color-primary-shaded-1: #f5f9fe;
    --color-primary-shaded-2: #d8e6fd;
    --color-primary-shaded-3: #b7d1fb;
    --color-primary-shaded-4: #70a4f7;
    --color-primary-shaded-5: #317bf4;
    --color-primary-shaded-6: #1460da;
    --color-primary-shaded-7: #1151b8;
    --color-primary-shaded-8: #0c3c88;

    --color-text-unshaded: #000000;
    --color-text-shaded-1: #898989;
    --color-text-shaded-2: #737373;
    --color-text-shaded-3: #595959;
    --color-text-shaded-4: #373737;
    --color-text-shaded-5: #2f2f2f;
    --color-text-shaded-6: #252525;
    --color-text-shaded-7: #151515;
    --color-text-shaded-8: #0b0b0b;

    --color-background-unshaded: #f8f8f8;
    --color-background-shaded-1: #dcdcdc;
    --color-background-shaded-2: #c1c1c1;
    --color-background-shaded-3: #a6a6a6;
    --color-background-shaded-4: #8b8b8b;
    --color-background-shaded-5: #6f6f6f;
    --color-background-shaded-6: #545454;
    --color-background-shaded-7: #393939;
    --color-background-shaded-8: #1e1e1e;

    --color-error-unshaded: #e23d3d;
    --color-error-shaded-1: #fef6f6;
    --color-error-shaded-2: #fbdddd;
    --color-error-shaded-3: #f7c1c1;
    --color-error-shaded-4: #ee8686;
    --color-error-shaded-5: #e65252;
    --color-error-shaded-6: #cc3737;
    --color-error-shaded-7: #ac2f2f;
    --color-error-shaded-8: #7f2222;

    --color-success-unshaded: #107c10;
    --color-success-shaded-1: #f1faf1;
    --color-success-shaded-2: #caeaca;
    --color-success-shaded-3: #a0d8a0;
    --color-success-shaded-4: #55b155;
    --color-success-shaded-5: #218d21;
    --color-success-shaded-6: #0f700f;
    --color-success-shaded-7: #0c5f0c;
    --color-success-shaded-8: #094609;

    --color-white-unshaded: #ffffff;
    --color-white-shaded-1: #767676;
    --color-white-shaded-2: #a6a6a6;
    --color-white-shaded-3: #c8c8c8;
    --color-white-shaded-4: #d0d0d0;
    --color-white-shaded-5: #dadada;
    --color-white-shaded-6: #eaeaea;
    --color-white-shaded-7: #f4f4f4;
    --color-white-shaded-8: #f8f8f8;

    --color-black-unshaded: #000000;
    --color-black-shaded-1: #898989;
    --color-black-shaded-2: #737373;
    --color-black-shaded-3: #595959;
    --color-black-shaded-4: #373737;
    --color-black-shaded-5: #2f2f2f;
    --color-black-shaded-6: #252525;
    --color-black-shaded-7: #151515;
    --color-black-shaded-8: #0b0b0b;

    --color-apple-unshaded: #000000;
    --color-apple-shaded-1: #898989;
    --color-apple-shaded-2: #737373;
    --color-apple-shaded-3: #595959;
    --color-apple-shaded-4: #373737;
    --color-apple-shaded-5: #2f2f2f;
    --color-apple-shaded-6: #252525;
    --color-apple-shaded-7: #151515;
    --color-apple-shaded-8: #0b0b0b;

    --color-google-unshaded: #ffffff;
    --color-google-shaded-1: #767676;
    --color-google-shaded-2: #a6a6a6;
    --color-google-shaded-3: #c8c8c8;
    --color-google-shaded-4: #d0d0d0;
    --color-google-shaded-5: #dadada;
    --color-google-shaded-6: #eaeaea;
    --color-google-shaded-7: #f4f4f4;
    --color-google-shaded-8: #f8f8f8;

    --color-facebook-unshaded: #3b5998;
    --color-facebook-shaded-1: #f5f7fb;
    --color-facebook-shaded-2: #d7dfef;
    --color-facebook-shaded-3: #b7c4e0;
    --color-facebook-shaded-4: #7b91c2;
    --color-facebook-shaded-5: #4d69a5;
    --color-facebook-shaded-6: #36508a;
    --color-facebook-shaded-7: #2d4474;
    --color-facebook-shaded-8: #213256;

    --color-github-unshaded: #171515;
    --color-github-shaded-1: #e3e1e1;
    --color-github-shaded-2: #cac5c5;
    --color-github-shaded-3: #b0abab;
    --color-github-shaded-4: #979090;
    --color-github-shaded-5: #7d7777;
    --color-github-shaded-6: #645e5e;
    --color-github-shaded-7: #4a4545;
    --color-github-shaded-8: #302d2d;

    --color-linkedin-unshaded: #187fb8;
    --color-linkedin-shaded-1: #f3f9fc;
    --color-linkedin-shaded-2: #d2e8f4;
    --color-linkedin-shaded-3: #add4ea;
    --color-linkedin-shaded-4: #65add4;
    --color-linkedin-shaded-5: #2d8dc0;
    --color-linkedin-shaded-6: #1573a5;
    --color-linkedin-shaded-7: #12618c;
    --color-linkedin-shaded-8: #0d4867;

    --color-azureadv2-unshaded: #ffffff;
    --color-azureadv2-shaded-1: #767676;
    --color-azureadv2-shaded-2: #a6a6a6;
    --color-azureadv2-shaded-3: #c8c8c8;
    --color-azureadv2-shaded-4: #d0d0d0;
    --color-azureadv2-shaded-5: #dadada;
    --color-azureadv2-shaded-6: #eaeaea;
    --color-azureadv2-shaded-7: #f4f4f4;
    --color-azureadv2-shaded-8: #f8f8f8;

    --color-azureadb2c-unshaded: #ffffff;
    --color-azureadb2c-shaded-1: #767676;
    --color-azureadb2c-shaded-2: #a6a6a6;
    --color-azureadb2c-shaded-3: #c8c8c8;
    --color-azureadb2c-shaded-4: #d0d0d0;
    --color-azureadb2c-shaded-5: #dadada;
    --color-azureadb2c-shaded-6: #eaeaea;
    --color-azureadb2c-shaded-7: #f4f4f4;
    --color-azureadb2c-shaded-8: #f8f8f8;

    --color-adfs-unshaded: #ffffff;
    --color-adfs-shaded-1: #767676;
    --color-adfs-shaded-2: #a6a6a6;
    --color-adfs-shaded-3: #c8c8c8;
    --color-adfs-shaded-4: #d0d0d0;
    --color-adfs-shaded-5: #dadada;
    --color-adfs-shaded-6: #eaeaea;
    --color-adfs-shaded-7: #f4f4f4;
    --color-adfs-shaded-8: #f8f8f8;

    --color-wechat-unshaded: #07c160;
    --color-wechat-shaded-1: #f3fdf8;
    --color-wechat-shaded-2: #d0f5e2;
    --color-wechat-shaded-3: #a8edc9;
    --color-wechat-shaded-4: #5dda99;
    --color-wechat-shaded-5: #1fc971;
    --color-wechat-shaded-6: #07ae58;
    --color-wechat-shaded-7: #06934a;
    --color-wechat-shaded-8: #046d37;

    --color-warn: #fbca4e;
    --color-good: #58ca9a;
    --color-status-dark: #8a8886;

    --color-pane-background: #ffffff;
    --color-pane-shadow: rgb(0 0 0 / 0.05);
    --color-pane-border: #e5e5e5;

    --color-separator: #e5e5e5;

    --color-settings-item-background: #f8f8f8;

    --color-password-strength-meter-0: #edebe9;
    --color-password-strength-meter-1: var(--color-error-unshaded);
    --color-password-strength-meter-2: #ffa133;
    --color-password-strength-meter-3: var(--color-warn);
    --color-password-strength-meter-4: #baca58;
    --color-password-strength-meter-5: var(--color-good);

    --color-recovery-code-list-background: #eaeaea;
  }

  .secondary-txt {
    color: var(--color-text-shaded-1);
  }

  .text-input:focus {
    border-bottom-color: var(--color-primary-unshaded);
  }

  .textarea:focus {
    border-bottom-color: var(--color-primary-unshaded);
  }

  .select:focus {
    border-bottom-color: var(--color-primary-unshaded);
  }

  .primary-btn {
    color: var(--color-white-shaded-8);
    background-color: var(--color-primary-unshaded);
  }
  .primary-btn:focus {
    background-color: var(--color-primary-unshaded);
  }
  .primary-btn:hover {
    background-color: var(--color-primary-shaded-6);
  }
  .primary-btn:active {
    background-color: var(--color-primary-shaded-7);
  }
  .primary-btn:disabled {
    background-color: var(--color-primary-shaded-3);
  }
  .primary-btn.outline {
    color: var(--color-primary-unshaded);
    border-color: var(--color-primary-unshaded);
    background-color: transparent;
  }
  .primary-btn.outline:focus {
    color: var(--color-primary-unshaded);
    border-color: var(--color-primary-unshaded);
  }
  .primary-btn.outline:hover {
    color: var(--color-primary-shaded-6);
    border-color: var(--color-primary-shaded-6);
  }
  .primary-btn.outline:active {
    color: var(--color-primary-shaded-7);
    border-color: var(--color-primary-shaded-7);
  }
  .primary-btn.outline:disabled {
    color: var(--color-primary-shaded-3);
    border-color: var(--color-primary-shaded-3);
  }

  .secondary-btn {
    color: var(--color-primary-unshaded);
    background-color: transparent;
  }
  .secondary-btn:focus {
    color: var(--color-primary-unshaded);
  }
  .secondary-btn:hover {
    color: var(--color-primary-shaded-4);
  }
  .secondary-btn:active {
    color: var(--color-primary-shaded-7);
  }
  .secondary-btn:disabled {
    color: var(--color-white-shaded-2);
  }

  .icon-btn {
    color: var(--color-text-unshaded);
    background-color: transparent;
  }
  .icon-btn:focus {
    color: var(--color-text-unshaded);
  }
  .icon-btn:hover {
    color: var(--color-text-shaded-3);
  }
  .icon-btn:active {
    color: var(--color-text-shaded-7);
  }
  .icon-btn:disabled {
    color: var(--color-text-shaded-2);
  }

  .light-btn {
    @apply border border-solid;
    color: var(--color-text-unshaded);
    background-color: transparent;
    border-color: var(--color-text-unshaded);
  }
  .light-btn:focus {
    color: var(--color-text-unshaded);
    border-color: var(--color-text-unshaded);
  }
  .light-btn:hover {
    color: var(--color-text-shaded-4);
    border-color: var(--color-text-shaded-4);
  }
  .light-btn:active {
    color: var(--color-text-shaded-7);
    border-color: var(--color-text-shaded-7);
  }
  .light-btn:disabled {
    color: var(--color-text-shaded-2);
    border-color: var(--color-text-shaded-2);
  }

  .outlined-btn {
    @apply border border-solid;
    color: var(--color-text-unshaded);
    background-color: transparent;
    border-color: var(--color-text-unshaded);
  }

  .outlined-btn--destructive {
    color: var(--color-error-unshaded);
    border-color: var(--color-error-unshaded);
  }

  .outlined-btn--destructive:focus,
  .outlined-btn--destructive:hover,
  .outlined-btn--destructive:active {
    color: var(--color-error-shaded-6);
    border-color: var(--color-error-shaded-6);
  }

  .action-btn {
    @apply border border-solid;
    color: var(--color-text-unshaded);
    background-color: transparent;
    border-color: var(--color-separator);
  }
  .action-btn:focus {
    color: var(--color-text-unshaded);
    background-color: transparent;
  }
  .action-btn:hover {
    color: var(--color-text-shaded-4);
    border-color: var(--color-primary-unshaded);
  }
  .action-btn:active {
    color: var(--color-text-shaded-7);
    border-color: var(--color-primary-unshaded);
    background-color: var(--color-white-shaded-8);
  }
  .action-btn:disabled {
    color: var(--color-text-shaded-2);
  }

  .settings-security-item {
    border-color: var(--color-settings-item-background);
    background-color: var(--color-settings-item-background);
  }
  .settings-security-item:focus {
    border-color: var(--color-primary-unshaded);
  }
  .settings-security-item:hover {
    border-color: var(--color-primary-unshaded);
  }
  .settings-security-item:active {
    border-color: var(--color-primary-unshaded);
  }

  /* <a> does not have disabled attribute */
  a:not(.not-a),
  a:not(.not-a):visited,
  .link,
  .link:visited,
  a:not(.not-a):focus,
  .link:focus {
    color: var(--color-primary-unshaded);
    background-color: transparent;
  }
  a:not(.not-a):hover,
  .link:hover {
    color: var(--color-primary-shaded-4);
  }
  a:not(.not-a):active,
  .link:active {
    color: var(--color-primary-shaded-7);
  }

  .apple {
    color: var(--color-white-unshaded);
    background-color: var(--color-apple-unshaded);
  }
  .apple:focus {
    background-color: var(--color-apple-unshaded);
  }
  .apple:hover {
    background-color: var(--color-apple-shaded-4);
  }
  .apple:active {
    background-color: var(--color-apple-shaded-7);
  }
  .apple:disabled {
    background-color: var(--color-apple-shaded-2);
  }

  .passkey-btn {
    @apply border border-solid;
    border-color: var(--color-separator);
    color: var(--color-black-unshaded);
    background-color: var(--color-white-unshaded);
  }
  .passkey-btn:focus {
    background-color: var(--color-white-unshaded);
  }
  .passkey-btn:hover {
    background-color: var(--color-white-shaded-4);
  }
  .passkey-btn:active {
    background-color: var(--color-white-shaded-7);
  }
  .passkey-btn:disabled {
    background-color: var(--color-white-shaded-2);
  }

  .sso-btn.google {
    @apply border border-solid;
    border-color: var(--color-separator);
  }
  .google {
    color: var(--color-black-unshaded);
    background-color: var(--color-google-unshaded);
  }
  .google:focus {
    background-color: var(--color-google-unshaded);
  }
  .google:hover {
    background-color: var(--color-google-shaded-4);
  }
  .google:active {
    background-color: var(--color-google-shaded-7);
  }
  .google:disabled {
    background-color: var(--color-google-shaded-2);
  }

  .facebook {
    color: var(--color-white-unshaded);
    background-color: var(--color-facebook-unshaded);
  }
  .facebook:focus {
    background-color: var(--color-facebook-unshaded);
  }
  .facebook:hover {
    background-color: var(--color-facebook-shaded-4);
  }
  .facebook:active {
    background-color: var(--color-facebook-shaded-7);
  }
  .facebook:disabled {
    background-color: var(--color-facebook-shaded-2);
  }

  .github {
    color: var(--color-white-unshaded);
    background-color: var(--color-github-unshaded);
  }
  .github:focus {
    background-color: var(--color-github-unshaded);
  }
  .github:hover {
    background-color: var(--color-github-shaded-4);
  }
  .github:active {
    background-color: var(--color-github-shaded-7);
  }
  .github:disabled {
    background-color: var(--color-github-shaded-2);
  }

  .linkedin {
    color: var(--color-white-unshaded);
    background-color: var(--color-linkedin-unshaded);
  }
  .linkedin:focus {
    background-color: var(--color-linkedin-unshaded);
  }
  .linkedin:hover {
    background-color: var(--color-linkedin-shaded-4);
  }
  .linkedin:active {
    background-color: var(--color-linkedin-shaded-7);
  }
  .linkedin:disabled {
    background-color: var(--color-linkedin-shaded-2);
  }

  .sso-btn.azureadv2 {
    @apply border border-solid;
    border-color: var(--color-separator);
  }
  .azureadv2 {
    color: var(--color-black-unshaded);
    background-color: var(--color-azureadv2-unshaded);
  }
  .azureadv2:focus {
    background-color: var(--color-azureadv2-unshaded);
  }
  .azureadv2:hover {
    background-color: var(--color-azureadv2-shaded-4);
  }
  .azureadv2:active {
    background-color: var(--color-azureadv2-shaded-7);
  }
  .azureadv2:disabled {
    background-color: var(--color-azureadv2-shaded-2);
  }

  .sso-btn.azureadb2c {
    @apply border border-solid;
    border-color: var(--color-separator);
  }
  .azureadb2c {
    color: var(--color-black-unshaded);
    background-color: var(--color-azureadb2c-unshaded);
  }
  .azureadb2c:focus {
    background-color: var(--color-azureadb2c-unshaded);
  }
  .azureadb2c:hover {
    background-color: var(--color-azureadb2c-shaded-4);
  }
  .azureadb2c:active {
    background-color: var(--color-azureadb2c-shaded-7);
  }
  .azureadb2c:disabled {
    background-color: var(--color-azureadb2c-shaded-2);
  }

  .sso-btn.adfs {
    @apply border border-solid;
    border-color: var(--color-separator);
  }
  .adfs {
    color: var(--color-black-unshaded);
    background-color: var(--color-adfs-unshaded);
  }
  .adfs:focus {
    background-color: var(--color-adfs-unshaded);
  }
  .adfs:hover {
    background-color: var(--color-adfs-shaded-4);
  }
  .adfs:active {
    background-color: var(--color-adfs-shaded-7);
  }
  .adfs:disabled {
    background-color: var(--color-adfs-shaded-2);
  }

  .wechat {
    /* The class is used in both WeChat login button and login proceed button */
    color: var(--color-white-unshaded);
    background-color: var(--color-wechat-unshaded);
  }
  .wechat:focus {
    background-color: var(--color-wechat-unshaded);
  }
  .wechat:hover {
    background-color: var(--color-wechat-shaded-4);
  }
  .wechat:active {
    background-color: var(--color-wechat-shaded-7);
  }
  .wechat:disabled {
    background-color: var(--color-wechat-shaded-2);
  }

  .sso-btn.iamsmart {
    @apply border border-solid;
    border-color: var(--color-separator);
  }
  .iamsmart {
    color: var(--color-black-unshaded);
    background-color: var(--color-white-unshaded);
  }
  .iamsmart:focus {
    background-color: var(--color-white-unshaded);
  }
  .iamsmart:hover {
    background-color: var(--color-white-shaded-4);
  }
  .iamsmart:active {
    background-color: var(--color-white-shaded-7);
  }
  .iamsmart:disabled {
    background-color: var(--color-white-shaded-2);
  }
  .sso-btn-icon.iamsmart-icon {
    background-image: url("./img/icon-iamsmart-light.png");
  }

  .wallet-btn.metamask {
    @apply border border-solid;
    border-color: var(--color-separator);
  }
  .metamask {
    color: var(--color-black-unshaded);
    background-color: var(--color-white-unshaded);
  }
  .metamask:focus {
    background-color: var(--color-white-unshaded);
  }
  .metamask:hover {
    background-color: var(--color-white-shaded-4);
  }
  .metamask:active {
    background-color: var(--color-white-shaded-7);
  }
  .metamask:disabled {
    background-color: var(--color-white-shaded-2);
  }

  .signin-signup-link.current {
    border-color: var(--color-primary-unshaded);
    color: var(--color-primary-unshaded);
  }

  .tutorial {
    background-color: var(--color-black-shaded-4);
    color: var(--color-white-shaded-7);
  }
}
