html.bandai-namco {
  &:root {
    /* Variable Overrides */
    --color-palette-branding-normal: var(bandai-blue) !important;
    --color-palette-branding-lucent: #260c5a;
    --app-styling-background: var(--lt-3);
    --app-styling-slate-level-1: var(--white);
    --header--background: var(--black);

    --text-colors-link-default: var(--bandai-brand);
    --text-colors-link-hover: var(--bandai-blue);

    /* Cards */
    --card--title-color: var(--bandai-yellow);
    --card--subtitle-color: var(--bandai-blue);
    --card--content-color: var(--white);

    /* App COC PIPs */
    --ui-bg-inverted: var(--bandai-yellow);
    --ui-border-accented: var(--bandai-blue);

    --input-buttons-primary-bg-default: var(--white);
    --input-buttons-primary-text-default: var(--black);
    --input-buttons-primary-bg-hover: var(--yellow);
    --input-buttons-primary-text-hover: var(--black);

    --input-buttons-secondary-bg-default: transparent;
    --input-buttons-secondary-text-default: var(--white);
    --input-buttons-secondary-bg-hover: var(--yellow);
    --input-buttons-secondary-text-hover: var(--black);

    --input-buttons-primary-bg-disabled: rgb(12, 77, 162, .1);
    --input-buttons-primary-text-disabled: var(--lt-1);

    /* Brand Colours */

    --bandai-blue: rgb(0, 105, 177);
    --bandai-aqua: rgb(0, 176, 185);
    --bandai-yellow: rgb(246, 183, 0);
    --bandai-red: rgb(223, 70, 97);
    --bandai-brand: rgb(230, 0, 0);

    --lt-3: #F0F2F5;
    --lt-2: #373737;
    --lt-1: #222;
    --lt-0: #000;

    --nav-blue: #004099;
    --social-bar-bg-color: #1059A4;

    --blue-alt: #0056b3;
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #f6b700;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --black: #000;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;

    /* Fonts */
    --h1-font-family: source-sans-pro, sans-serif;
    --primary-font-family: source-sans-pro, sans-serif;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --nav-font: "Helvetica";

    /* Application / Modals */
    --color-palette-branding-normal: var(--bandai-blue);
    --color-palette-branding-lucent: var(--white);

    & body {
      font-family: var(--primary-font-family);

      button:not(.nui) {
        font-family: source-sans-pro, sans-serif;
        font-size: 16px;
        line-height: 26px;
        letter-spacing: normal;
        font-weight: 700;
        padding: 12px 20px;
        display: flex;
        flex-direction: row;
        gap: 5px;
        height: 40px;
        align-items: center;
        cursor: pointer;
        white-space: nowrap;
        min-width: 140px;
        left: 20px;
        top: 20px;
        transition: .3s;
        border-radius: 30px;
        border: 2px solid transparent;

        &:hover {
          border: 2px solid transparent;
          height: 40px;
        }

        &[color="secondary"]{
          border: 2px solid var(--white);
          &:hover {
            border: 2px solid var(--yellow)
          }
        }

        &[color="tertiary"] {
          border: 2px solid var(--black);
          background-color: var(--black);
          color: var(--white);

          &:hover {
            border: 2px solid var(--black);
            background-color: var(--white);
            color: var(--black);
          }
        }

      }

      .bandai-namco-border {
        border: 0;
        border-bottom: 10px solid;
        border-image: linear-gradient(to right,
          var(--bandai-blue) 0%,
          /* 0–25% blue */
          var(--bandai-blue) 25%,
          var(--bandai-aqua) 25%,
          /* 25–50% aqua */
          var(--bandai-aqua) 50%,
          var(--bandai-yellow)50%,
          /* 50–75% yellow */
          var(--bandai-yellow)75%,
          var(--bandai-red) 75%,
          /* 75–100% red */
          var(--bandai-red) 100%) 1;
      }

      .navigation:not(.user-menu) {
        font-family: source-sans-pro, sans-serif;

        & nav{
          & button {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 10px;
            font-family: source-sans-pro, sans-serif;
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: 16px;
            letter-spacing: .16px;
            text-transform: uppercase;
            color: #fff;
            text-decoration: none;
            height: 50px;
            border-radius: 0px;
            &:hover {
              background-color: rgb(0, 176, 185);
            }
          }
        }
      }

      .user-menu {
        & .wrapper{
          border: 4px solid var(--bandai-blue);
          margin-top: -4px;
        }
        & .bar{
          & .tenure {
            & .tenure-stack {
              & .background { color: var(--bandai-blue) !important; }
              & .text { color: var(--white) !important; }
            }
          }
          & .details {
            & .name { color: var(--bandai-blue) !important; }
          }
        }
        & .menu {
          & .details, & .footer{ background: var(--bandai-blue) !important;}
          & .footer {
            & button:not(.nui) {
                --_background: var(--input-buttons-secondary-bg-default);
                --_focus: var(--input-buttons-secondary-bg-default);
                --_color: var(--input-buttons-secondary-text-default);
              }
          }
        }
      }

      .title {
        inset-block-end: calc(50% + 5vh);
      }

      .banner-bg {
        -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0/1) calc(100% - 120px), rgb(0 0 0 / 1) calc(100% - 20px));
        mask-image: linear-gradient(180deg, rgb(0 0 0/1) calc(100% - 120px), rgb(0 0 0 / 1) calc(100% - 20px));
      }
    }

    /* Application Overrides */
    .UForm {
      & label, & label span {
        color: var(--capcom-lt-1) !important;
        font-weight: 6 !important;
      }

      & .UFormHeading {
        & h5 {
          color: var(--bandai-blue) !important;

        }
      }

      & .UCheckbox {
        & label {
          & span {
            color: var(--black) !important;
          }
        }
      }
    }

    /* Customize Login */
    & .login-wrapper {
      &::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(/images/bandai-namco/image.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        filter: blur(5px);
        z-index: -1;
      }
      &::after{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: radial-gradient(circle, transparent 0%, #222 90%);
        z-index: 0;
        pointer-events: none;
      }

      & .app-wrapper {
        width: 100%;
      }

      & .form-wrapper {

        & .login {
          background-color: var(--white);
          width: 100dvw;
          margin: 20px;
          max-width: 600px;
          padding: 4em;
          border: 3px solid var(--bandai-brand);
          border-radius: 0;

          & .login-form {
            padding: 0;
            width: 100%;

            & .header {
              margin-bottom: 40px;

              & h1 {
                font-size: calc(56px + .5vw) !important;
                font-weight: 700 !important;
                margin-bottom: 10px;
                color: var(--bandai-brand);
                text-transform: uppercase;
              }

              & p {
                font-size: 18px;
                font-weight: 400;
                color: var(--bandai-brand);
              }
            }

            & .divider {

              &::before,
              &::after {
                background: var(--bandai-brand);
              }

              & .label {
                color: var(--bandai-brand);
              }
            }

            & .return {
              color: var(--bandai-brand);
            }

            & .return:hover {
              color: var(--bandai-blue) !important;
              opacity: .8;
            }
          }
        }

        & .card {
          width: calc(100vw - 50px);

          &::before,
          &::after {
            background: transparent;
            border-radius: 0;
            display: none;
          }
        }

        &::before,
        &::after {
          background: transparent;
          border-radius: 0;
          display: none;
        }

      }
    }
  }
}