:root[data-theme="wiiu"] {
  background-image: url(../assets/images/bg_qr_wiiu.png) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  height: 100% !important;

  html,
  body {
    background-color: transparent !important;
    // UI colors
    --root: #ffffff;
    --text: #000000;
    --label: #666666;
    --stroke: #dddddd;
    --stroke-rgb: 221, 221, 221;
    --container: #eeeeee;
    --sub-container: #ececec;
    --hover: #dddddd;
    --focus: #e7e7e7;

    --icon-face-fill: #ffffff;
    --icon-face-stroke: #6f6f6f;
    --icon-face-detail: #8d8d8d;
    --icon-face-makeup: #ffbaba;
    --icon-face-wrinkles: #996d54;
    --icon-head-fill: #ffffff;
    --icon-head-stroke: #999999;
    --icon-hair-fill: currentColor;
    --icon-eyebrow-fill: currentColor;
    --icon-facial-hair-fill: currentColor;
    --icon-mouth-tooth: #ffffff;
    --icon-glasses-fill: #000000;
    --icon-glasses-shade: #606060;
    --icon-lip-color-top: #712a04;
    --icon-lip-color-bottom: #be4e26;
    color: black !important;
  }

  div::-webkit-scrollbar-thumb {
    border-radius: 10px !important;
    background-color: rgb(51 183 53) !important;
  }

  div::-webkit-scrollbar-track {
    border-radius: 10px !important;
    background-color: transparent !important;
  }

  .modal .modal-content {
    min-width: 300px !important;
    button {
      font-size: 17px !important;
    }
    .modal-header {
      background: linear-gradient(
        0deg,
        #6b6b6b 3%,
        #9d9d9d 0%,
        #b1b1b1 100%
      ) !important;
      padding-bottom: 10px !important;
      color: #fff !important;
      text-shadow: 0px -1px 0px #4e4e4e !important;
      font-size: 1.15rem !important;
      .close-button {
        background: var(--error-color) !important;
        box-shadow: #ff2b2b 0px 0px 2px 1px inset,
          0px -1px 0px 0px rgb(255 255 255) !important;
        position: absolute !important;
      }
    }
    .modal-body {
      // align-items: center !important;
      img {
        box-shadow: 0px 0.5px 4px 1px rgba(0, 0, 0, 0.25);
        background: linear-gradient(
          #f6f6f6 0%,
          #ffffff 15%,
          #ffffff 45%,
          #f6f6f6 45%,
          #fcfcfc 100%
        ) !important;
        margin: 5px;
        border-radius: 7px !important;
      }
    }
  }

  .flex-group {
    gap: 1rem !important;
  }

  button {
    background: linear-gradient(#d1d1d1 5%, #ffffff 100%) !important;
    border: none !important;
    text-shadow: 0px 1px #fff !important;
    box-shadow: #d1d1d1 0px 2px 3px 1px inset,
      0px 0.5px 3px 1px rgb(133 133 133 / 71%) !important;
    position: relative;
    z-index: 1 !important;
    font-size: 18px !important;
    transition: 0.1s !important;
  }

  button:not(.close-button):before {
    content: "";
    width: 100%;
    display: block;
    top: 0;
    left: 0;
    position: absolute;
    height: 40%;
    border-radius: 20px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    background: linear-gradient(rgb(243, 243, 243, 30), rgb(243, 243, 243, 60));
    z-index: -1;
  }

  button:focus {
    box-shadow: #d1d1d1 0px 2px 3px 1px inset,
      0px 0.5px 3px 1px rgb(133 133 133 / 71%) !important;
  }

  input {
    box-shadow: 0px 2px 3px -1px #d2d2d2 inset;
    border: 2px solid #bcbcbc;
  }

  input:hover {
    background-color: #f5f5f5;
    outline: 0;
  }

  input[type="range"] {
    box-shadow: none;
  }

  .ui-base {
    background-color: unset !important;

    @media screen and (max-width: 960px) {
      .tab-list {
        background: linear-gradient(#a6ff5e 5%, #02f21c 100%) !important;
      }
    }

    .mii-holder {
      background-color: rgba(255, 255, 255, 0.2) !important;
      backdrop-filter: blur(3px) !important;
      margin-bottom: -1rem;
    }

    .tab-list {
      grid-area: tabList !important;
      background: linear-gradient(
        to right,
        #a6ff5e 5%,
        #02f21c 100%
      ) !important;
      box-shadow: #2bd500 0px 0px 4px 2px inset,
        0px 0.5px 3px 1px rgb(133 133 133 / 42%) !important;

      .tab:hover {
        background-color: rgba(0, 0, 0, 0.15) !important;
      }
      .tab.tab-square > svg {
        color: #ffffff !important;
        filter: drop-shadow(0px -2px 0px #1e9500) !important;
      }
      .tab.tab-square.active {
        background-color: #42f839 !important;
        box-shadow: 0 0 0 0.3rem rgb(51 183 53) !important;
      }
      .tab.tab-square.active {
        box-shadow: 0 0 0 0.3rem rgb(51 183 53) !important;
      }
      .tab.tab-save {
        background: linear-gradient(#e6e600 5%, #fffb7e 100%) !important;
        text-shadow: 0 1px #f3ff6a !important;
        border: none !important;
        box-shadow: #d1d1d1 0px 2px 3px 1px inset,
          0px 0.5px 3px 1px rgba(133, 133, 133, 0.71) !important;
        position: relative;
        z-index: 1 !important;
        font-size: 18px !important;
        transition: 0.1s !important;
        color: #000000 !important;

        span {
          text-shadow: 0 2px 0px #ffffff55 !important;
        }
        svg {
          color: #000000 !important;
          filter: drop-shadow(0 2px 0px #ffffff55) !important;
        }

        &::before {
          content: "";
          width: 100%;
          display: block;
          top: 0;
          left: 0;
          position: absolute;
          height: 40%;
          border-radius: 20px;
          border-bottom-left-radius: 30px;
          border-bottom-right-radius: 30px;
          // background: linear-gradient(rgb(243, 243, 243), rgb(243, 243, 243));
          background: linear-gradient(
            rgb(255, 251, 183),
            rgb(251, 255, 114)
          ) !important;
          z-index: -1;
        }
        &::after {
          background-color: rgba(0, 0, 0, 0.45) !important;
        }
      }
    }

    .tab-content {
      .feature-set-container .tab-list {
        position: relative !important;
        z-index: 2 !important;
        border-radius: 5px !important;
        background: linear-gradient(#e6e600 5%, #fffb7e 100%) !important;
        box-shadow: #f1da00 0px 1px 3px 4px inset,
          0px 0.5px 3px 1px rgb(133 133 133 / 42%) !important;

        &::before {
          content: "" !important;
          width: 98.5% !important;
          display: block !important;
          top: 4px !important;
          left: 3px !important;
          position: absolute !important;
          height: 40% !important;
          border-radius: 5px !important;
          border-bottom-left-radius: 30px !important;
          border-bottom-right-radius: 30px !important;
          background: linear-gradient(
            rgb(255 251 183),
            rgb(251 255 114)
          ) !important;
          z-index: -1 !important;
        }
      }
    }

    .tab::after {
      background-color: rgba(0, 0, 0, 0.45) !important;
    }
  }

  .tab-content {
    background-color: transparent !important;
  }
  .tab-content .feature-set-group {
    gap: 18px !important;
    padding-top: 20px !important;
    padding-bottom: 40px !important;
  }
  .tab-content .feature-set-group .feature-set-header {
    background: rgb(225 225 225 / 25%) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid #a2a2a2 !important;
  }
  .tab-content .feature-set-group .feature-switch .feature-switch-left,
  .tab-content .feature-set-group .feature-switch .feature-switch-right {
    padding: 8px 20px !important;
    border-right-width: unset !important;
  }
  .tab-content .feature-set-group .feature-switch .feature-switch-left.active,
  .tab-content .feature-set-group .feature-switch .feature-switch-right.active {
    background: linear-gradient(#e6e600 5%, #fffb7e 100%) !important;
    box-shadow: #f1da00 0px 1px 3px 4px inset,
      0px 0.5px 3px 1px rgb(133 133 133 / 42%) !important;
  }
  button.selected,
  button.selected-setting {
    background: linear-gradient(#e6e600 5%, #fffb7e 100%) !important;
    text-shadow: 0 1px #f3ff6a !important;
  }
  .tab-content .feature-set-group .feature-switch .feature-switch-left:before,
  .tab-content .feature-set-group .feature-switch .feature-switch-right:before {
    content: "" !important;
    width: 93% !important;
    display: block !important;
    top: 4px !important;
    left: 3px !important;
    position: absolute !important;
    height: 40% !important;
    border-radius: 5px !important;
    border-bottom-left-radius: 30px !important;
    border-bottom-right-radius: 30px !important;
    z-index: -1 !important;
  }

  .tab-content
    .feature-set-group
    .feature-switch
    .feature-switch-left.active:before,
  .tab-content
    .feature-set-group
    .feature-switch
    .feature-switch-right.active:before,
  button.selected::before,
  button.selected-setting::before {
    background: linear-gradient(rgb(255 251 183), rgb(251 255 114)) !important;
  }
  .tab-content .feature-set-group .feature-switch .feature-switch-left svg,
  .tab-content .feature-set-group .feature-switch .feature-switch-right svg {
    width: 60px;
    height: 60px;
    filter: drop-shadow(0px -2px 0px #fff) !important;
  }
  .tab-content
    .feature-set-group
    .feature-switch
    .feature-switch-left.active
    svg,
  .tab-content
    .feature-set-group
    .feature-switch
    .feature-switch-right.active
    svg {
    filter: drop-shadow(0px -2px 0px rgb(251 255 114)) !important;
  }
  .tab-content .feature-set-group .feature-item {
    min-width: 66px !important;
    min-height: 66px !important;
    cursor: unset !important;
    background: linear-gradient(#dedede 0%, #ffffff 50%) !important;
    box-shadow: 0px -2px #fff, 0px 2px #aeaeae, 0px 0px 4px #8c8c8c !important;
    transition: 0.1s !important;
  }

  .tab-content .feature-set-group .feature-item > svg {
    width: 65px !important;
    height: 65px !important;
  }

  .tab-content .feature-set-group .feature-item:hover {
    transform: scale(1.1) !important;
  }
  .tab-content .feature-set-group .feature-item.active {
    background: linear-gradient(#7cff55 0%, #dbffbf 50%) !important;
    box-shadow: 0px -2px 0px #d9ffd9, 0px 2px 0px #00bc09, 0px 0px 4px #8c8c8c !important;
  }
  .tab-content .feature-set-group .feature-slider span,
  .tab-content .feature-set-group .feature-range span {
    background: linear-gradient(#dedede 0%, #ffffff 50%) !important;
    box-shadow: 0px -2px #fff, 0px 2px #aeaeae, 0px 0px 4px #8c8c8c !important;
    transition: 0.1s !important;
    border-radius: 5px !important;
    padding: 3px 6px !important;
  }

  .tab-content .feature-set-group .feature-slider span:active,
  .tab-content .feature-set-group .feature-range span:active {
    transform: scale(1.1) !important;
  }

  .tab-content .feature-set-group .feature-slider span svg,
  .tab-content .feature-set-group .feature-range span svg {
    filter: drop-shadow(0px -2px 0px #fff) !important;
  }

  .mii-library .library-sidebar {
    background: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 1px 0px 3px rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(5px) !important;
  }
  .mii-library .library-sidebar > h1 {
    text-shadow: 0px 5px rgb(0, 0, 0, 0.08) !important;
  }
  .mii-library .library-sidebar .sidebar-credits span {
    font-size: 1rem !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    margin-bottom: 3px !important;
    width: 100% !important;
    border-bottom: 1.5px dashed var(--label) !important;
  }
  .mii-library .library-list .library-list-mii {
    position: relative !important;
    background: linear-gradient(
      #f6f6f6 0%,
      #ffffff 15%,
      #ffffff 45%,
      #f6f6f6 45%,
      #fcfcfc 100%
    ) !important;
    z-index: 10;
    box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.2);
  }

  .mii-library .library-list .library-list-mii.highlight {
    box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.2),
      0 0 0 0.3rem var(--selection-color) !important;
  }
  .mii-library .library-list .library-list-mii span {
    background: #707070 !important;
    color: #fff !important;
    text-shadow: 0px -2px #373737 !important;
    box-shadow: 0px 0px 5px 0px #2d2d2d inset !important;
  }
  @media screen and (max-width: 960px) {
    .mii-library .library-sidebar button:not(.close-button):before {
      border-radius: 10px !important;
      border-bottom-left-radius: 30px !important;
      border-bottom-right-radius: 30px !important;
    }
  }
}
