/*=== Media Query ===*/
.theme-mode-panel-open .mode-switcher-panel-wrapper {
  transform: translateX(0) translateY(-50%);
}

.mode-switcher-panel-wrapper {
  transition: .4s;
  box-shadow: 0 3px 6px 0 rgb(0 0 0 / 15%);
}

.mode-switcher-panel {
  padding: 25px 0 30px;
  background: #fff;
  border-radius: 0 2px 2px 0;

  .panel-group {
    padding: 0 30px;

    .panel-title {
      position: relative;
      margin-bottom: 12px;
      z-index: 0;

      .title {
        display: inline-block;
        padding-right: 10px;
        color: #333;
        font-size: 14px;
        font-weight: 700;
        background: #fff;
        padding-bottom: 10px;
        margin-bottom: 0;
        border-bottom: none;

        &::after {
          position: absolute;
          content: "";
          left: 0;
          top: 10px;
          height: 1px;
          width: 100%;
          background: #ebebeb;
          z-index: -1;
        }
      }
    }

    .color-skin {
      display: -webkit-box;
      display: flex;
      flex-wrap: wrap;
      margin: -7px -7px 0px;

      .color-item {
        display: inline-block;
        position: relative;
        -webkit-box-flex: 1;
        flex: 1 0 calc(25% - 14px);
        margin: 7px;
        border-radius: 2px;
        cursor: pointer;

        &::before {
          content: "";
          display: block;
          padding-bottom: 100%;
        }

        &::after {
          position: absolute;
          content: "";
          left: 50%;
          top: calc(50% - 5px);
          height: 7px;
          width: 12px;
          border: 2px solid #fff;
          border-top: none;
          border-right: none;
          opacity: 0;
          visibility: hidden;
          transform: translateX(-50%) rotate(-45deg);
        }

        &.active {
          &::after {
            opacity: 1;
            visibility: visible;
          }
        }
      }
    }
  }
}

.mode-switcher-panel .buttons button:focus {
  box-shadow: none;
  outline: none;
}

.mode-switcher-panel {
  .buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    .switcher-btn{
      position: relative;
      min-height: 48px;
      min-width: 48px;
      max-height: 48px;
      max-width: 48px;
      border: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      background: white;
      cursor: pointer;
      &::before{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 24px;
        transform: translate(-50%,-50%);
        content: "";
      }
      &.lite{
        &::before{
          background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 17.625C15.1066 17.625 17.625 15.1066 17.625 12C17.625 8.8934 15.1066 6.375 12 6.375C8.8934 6.375 6.375 8.8934 6.375 12C6.375 15.1066 8.8934 17.625 12 17.625Z' stroke='%23697484' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 3.375V1.5' stroke='%23697484' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.89707 5.89707L4.5752 4.5752' stroke='%23697484' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.375 12H1.5' stroke='%23697484' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.89707 18.103L4.5752 19.4249' stroke='%23697484' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 20.625V22.5' stroke='%23697484' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.1035 18.103L19.4254 19.4249' stroke='%23697484' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20.625 12H22.5' stroke='%23697484' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.1035 5.89707L19.4254 4.5752' stroke='%23697484' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        }
      }
      &.dark{
        &::before{
            background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3156 14.3062C18.8431 14.7191 17.2872 14.7326 15.8078 14.3454C14.3283 13.9582 12.9786 13.1841 11.8972 12.1027C10.8158 11.0214 10.0418 9.67162 9.65454 8.19216C9.26729 6.7127 9.28083 5.15683 9.69374 3.68433C8.24199 4.0884 6.92144 4.86578 5.86363 5.93904C4.80581 7.01231 4.04765 8.34399 3.66467 9.80144C3.28168 11.2589 3.28724 12.7913 3.68078 14.2459C4.07432 15.7006 4.84211 17.0267 5.90767 18.0923C6.97324 19.1578 8.29939 19.9256 9.75403 20.3192C11.2087 20.7127 12.741 20.7183 14.1985 20.3353C15.656 19.9523 16.9876 19.1941 18.0609 18.1363C19.1342 17.0785 19.9115 15.758 20.3156 14.3062Z' stroke='%23697484' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        }
      }
      &.active {
        background-color: #1777E5;
        &.lite{
          &::before{
              background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 17.625C15.1066 17.625 17.625 15.1066 17.625 12C17.625 8.8934 15.1066 6.375 12 6.375C8.8934 6.375 6.375 8.8934 6.375 12C6.375 15.1066 8.8934 17.625 12 17.625Z' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 3.375V1.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.89683 5.89683L4.57495 4.57495' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.375 12H1.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.89683 18.1031L4.57495 19.425' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 20.625V22.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.1031 18.1031L19.425 19.425' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20.625 12H22.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.1031 5.89683L19.425 4.57495' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            
          }
        }
        &.dark{
          &::before{
              background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3156 14.3062C18.8431 14.7191 17.2872 14.7326 15.8078 14.3454C14.3283 13.9582 12.9786 13.1841 11.8972 12.1027C10.8158 11.0214 10.0418 9.67162 9.65454 8.19216C9.26729 6.7127 9.28083 5.15683 9.69374 3.68433C8.24199 4.0884 6.92144 4.86578 5.86363 5.93904C4.80581 7.01231 4.04765 8.34399 3.66467 9.80144C3.28168 11.2589 3.28724 12.7913 3.68078 14.2459C4.07432 15.7006 4.84211 17.0267 5.90767 18.0923C6.97324 19.1578 8.29939 19.9256 9.75403 20.3192C11.2087 20.7127 12.741 20.7183 14.1985 20.3353C15.656 19.9523 16.9876 19.1941 18.0609 18.1363C19.1342 17.0785 19.9115 15.758 20.3156 14.3062Z' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          }
        }
      }
    }
  }
}

.mode-switcher-panel .switcher-minimize-button {
  position: absolute;
  font-size: 24px;
  top: 30px;
  border: 0;
  left: -45px;
  display: -webkit-box;
  display: flex;
  height: 50px;
  width: 50px;
  font-size: 20px;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  color: #0068e1;
  color: var(--color-primary);
  background: #fff;
  border-radius: 50% 0 0 50%;
  box-shadow: 0 3px 6px 0 rgb(0 0 0 / 15%);
  cursor: pointer;
  z-index: -1;
}

.mode-switcher-panel .switcher-minimize-button i {
  font-size: inherit;
  pointer-events: none;
  transition: .4s;
}

.mode-switcher-panel .switcher-minimize-button:focus {
  outline: none;
}

.position-fixed-right {
  position: fixed;
  right: 0;
  transform: translateY(-50%) translateX(100%);
  top: 50%;
  z-index: 99;
}
.theme-change-button{
  position: fixed;
  bottom: 24px;
  right: 24px;
  .toggle-button {
    border: 2px solid #fff;
    -webkit-appearance: none;
    outline: none;
    width: 48px;
    height: 48px;
    border-radius: 50px;
    position: relative;
    transition: 0.4s;
    background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 17.625C15.1066 17.625 17.625 15.1066 17.625 12C17.625 8.8934 15.1066 6.375 12 6.375C8.8934 6.375 6.375 8.8934 6.375 12C6.375 15.1066 8.8934 17.625 12 17.625Z' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 3.375V1.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.89683 5.89689L4.57495 4.57501' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.375 12H1.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.89683 18.1031L4.57495 19.425' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 20.625V22.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.1031 18.1031L19.425 19.425' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20.625 12H22.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.1031 5.89689L19.425 4.57501' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      no-repeat center var(--bs-primary-500);
    background-size: 24px;
    cursor: pointer;
  }
  .toggle-button:checked {
    background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3156 14.3063C18.8431 14.7192 17.2872 14.7327 15.8078 14.3455C14.3283 13.9582 12.9786 13.1842 11.8972 12.1028C10.8158 11.0214 10.0418 9.67169 9.65454 8.19222C9.26729 6.71276 9.28083 5.15689 9.69374 3.68439C8.24199 4.08846 6.92144 4.86584 5.86363 5.93911C4.80581 7.01237 4.04765 8.34405 3.66467 9.80151C3.28168 11.259 3.28724 12.7913 3.68078 14.246C4.07432 15.7006 4.84211 17.0268 5.90767 18.0923C6.97324 19.1579 8.29939 19.9257 9.75403 20.3192C11.2087 20.7128 12.741 20.7183 14.1985 20.3353C15.656 19.9523 16.9876 19.1942 18.0609 18.1364C19.1342 17.0786 19.9115 15.758 20.3156 14.3063Z' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      no-repeat center var(--bs-primary-500);
    background-size: 24px;
  }
}