<script setup lang="ts">
const wizard = useWizard()

useHead({
  title: computed(() => `${wizard.stepTitle} - Wizard V1 - Vuero`),
})
</script>

<template>
  <MinimalLayout>
    <!--Wizard Navbar-->
    <WizardV1Navigation
      v-model:step="wizard.step"
      :title="wizard.stepTitle"
    />

    <!--Wizard Progress Bar-->
    <VProgress
      id="wizard-progress"
      class="wizard-progress"
      color="primary"
      size="smaller"
      :value="(wizard.step / 8) * 100"
      :max="100"
    />

    <!--Main Wrapper-->
    <form
      method="post"
      novalidate
      class="wizard-v1-wrapper"
      @submit.prevent="() => wizard?.validateStepFn?.()"
    >
      <RouterView />

      <!--Wizard Navigation Buttons-->
      <div
        class="wizard-buttons"
        :class="[wizard.canNavigate && 'is-active']"
      >
        <div class="wizard-buttons-inner">
          <VButton
            class="wizard-button-previous"
            :disabled="wizard.previousStepFn === null"
            :color="wizard.previousStepFn === null ? 'light' : 'primary'"
            bold
            elevated
            @click="() => wizard?.previousStepFn?.()"
          >
            Previous
          </VButton>
          <VButton
            type="submit"
            class="wizard-button-previous"
            :disabled="wizard.validateStepFn === null"
            :color="wizard.validateStepFn === null ? 'light' : 'primary'"
            bold
            elevated
          >
            Validate
          </VButton>
        </div>
      </div>
    </form>
  </MinimalLayout>
</template>

<style lang="scss">
@import '/@src/scss/abstracts/all';

/* ==========================================================================
1. Wizard V1 Navigation
========================================================================== */

.wizard-progress {
  position: fixed;
  top: 60px;
  inset-inline-start: 0;
  z-index: 19;
  width: 100%;
  height: 0.5rem;

  &::-webkit-progress-value {
    border-start-end-radius: 50px;
    border-end-end-radius: 50px;
    transition: width 0.5s ease;
  }

  &::-moz-progress-bar {
    border-start-end-radius: 50px;
    border-end-end-radius: 50px;
    transition: width 0.5s ease;
  }

  &::-ms-fill {
    border-start-end-radius: 50px;
    border-end-end-radius: 50px;
    transition: width 0.5s ease;
  }
}

.wizard-buttons {
  position: fixed;
  bottom: 20px;
  inset-inline-start: 0;
  inset-inline-end: 0;
  margin: 0 auto;
  max-width: 306px;
  background: var(--white);
  border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
  border-radius: 14px;
  transform: translateY(120px);
  transition: all 0.3s; // transition-all test
  z-index: 5;

  &.is-active {
    transform: translateY(0);
  }

  .wizard-buttons-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;

    .button {
      min-width: 130px;
      margin: 0 4px;
      border-radius: 8px;
    }
  }
}

/* ==========================================================================
2. Wizard V1
========================================================================== */
.wizard-v1-wrapper {
  padding-top: 60px;
  padding-bottom: 60px;

  .inner-wrapper {
    display: none;
    animation: fadeInLeft 0.5s;
    padding: 40px 20px;

    &.is-active {
      display: block;
    }

    .step-title {
      margin-bottom: 30px;
      text-align: center;

      h2 {
        font-family: var(--font-alt);
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--dark-text);
        text-align: center;
      }

      p {
        font-family: var(--font);
        font-size: 1.2rem;
      }
    }
  }

  .step-content {
    .project-preview-wrapper {
      position: relative;

      .project-preview-loader {
        position: absolute;
        top: 0;
        inset-inline-start: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        background: #f2f2f2;
        opacity: 0;
        pointer-events: none;
        z-index: 2;
        transition: all 0.3s; // transition-all test

        &.is-active {
          opacity: 1;
          pointer-events: all;
        }

        .loader {
          position: relative;
          top: 60px;
          height: 5rem;
          width: 5rem;
        }
      }

      .project-preview-header {
        text-align: center;
        max-width: 320px;
        margin: 0 auto;

        > img {
          display: block;
          margin: 0 auto;
          max-width: 300px;
        }

        .v-avatar {
          position: relative;
          margin: 0 auto 12px;

          .edit-icon {
            position: absolute;
            bottom: 2px;
            inset-inline-end: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 30px;
            width: 30px;
            border-radius: var(--radius-rounded);
            background: var(--white);
            border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
            z-index: 1;
            transition: all 0.3s; // transition-all test

            .iconify {
              color: var(--light-text);
              font-size: 0.9rem;
            }
          }
        }

        h3 {
          &:hover {
            .edit-icon {
              opacity: 1;
              pointer-events: all;
            }
          }

          .edit-icon {
            pointer-events: none;
            opacity: 0;
            font-size: 16px;
            color: var(--light-text);
            transition: all 0.3s; // transition-all test
          }
        }

        p {
          font-size: 1rem;
          max-width: 540px;
          margin: 0 auto;
          line-height: 1.3;
        }
      }

      .project-preview-body {
        max-width: 640px;
        margin: 20px auto;

        .edit-box {
          position: relative;

          @include vuero-l-card;

          &:hover,
          &:focus {
            border-color: var(--primary);
            box-shadow: var(--light-box-shadow);

            .edit-icon {
              opacity: 1;
              pointer-events: all;
            }
          }

          .edit-box-placeholder {
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: var(--font);
            color: var(--light-text);

            &.is-media {
              padding: 14px 0;
            }

            &.is-list {
              padding: 20px 0;
            }
          }

          .edit-icon {
            position: absolute;
            top: 10px;
            inset-inline-end: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 24px;
            width: 24px;
            border-radius: var(--radius-rounded);
            background: color-mix(in oklab, var(--fade-grey), white 3%);
            opacity: 0;
            pointer-events: none;
            cursor: pointer;
            transition: all 0.3s; // transition-all test

            .iconify {
              font-size: 0.8rem;
            }
          }

          h4 {
            text-transform: uppercase;
            font-size: 0.8rem;
            font-family: var(--font);
            font-weight: 600;
            color: var(--dark-text);
            margin-bottom: 12px;
          }

          > .media-flex-center {
            margin-bottom: 0;
          }

          .estimated-budget,
          .estimated-due-date,
          .attachments-count {
            height: 130px;
            display: flex;
            align-items: center;
            justify-content: center;

            .inner-block {
              text-align: center;

              .budget,
              .attachments {
                color: var(--primary);
                font-family: var(--font);
                font-size: 2rem;
                font-weight: 600;
                line-height: 1.4;
              }

              .date {
                color: var(--primary);
                font-family: var(--font);
                font-size: 1.3rem;
                font-weight: 500;
                line-height: 1.4;
              }

              p {
                text-transform: uppercase;
                font-weight: 500;
                font-size: 0.8rem;
              }
            }
          }

          .media-list {
            padding-top: 10px;

            .media-list-item {
              margin-bottom: 12px;

              .media-flex-center {
                .flex-meta {
                  span {
                    &:first-child {
                      font-weight: 500;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .end-placeholder {
      padding: 12px 0;

      .button {
        min-width: 160px;
      }
    }

    .tools-wrapper {
      max-width: 840px;
      margin: 0 auto;

      .tool-card {
        position: relative;

        input {
          position: absolute;
          top: 0;
          inset-inline-start: 0;
          height: 100%;
          width: 100%;
          opacity: 0;
          cursor: pointer;

          &:checked + .tool-card-inner {
            border-color: var(--primary);

            .flex-end {
              .checkmark {
                opacity: 1;
              }
            }
          }
        }

        .tool-card-inner {
          padding: 12px;
          background: var(--white);
          border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
          border-radius: 10px;

          .media-flex-center {
            .flex-end {
              .checkmark {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 28px;
                width: 28px;
                border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
                border-radius: var(--radius-rounded);
                box-shadow: var(--light-box-shadow);
                opacity: 0;
                color: var(--primary);
                transition:
                  color 0.3s,
                  background-color 0.3s,
                  border-color 0.3s,
                  height 0.3s,
                  width 0.3s;

                .iconify {
                  height: 14px;
                  width: 14px;
                  stroke-width: 3px;
                }
              }
            }
          }
        }
      }
    }

    .project-team-wrapper {
      .project-team-header {
        text-align: center;
        max-width: 320px;
        margin: 0 auto;

        .field {
          text-align: left;

          .control {
            .input {
              border-radius: 10px;
            }
          }
        }

        > img {
          display: block;
          margin: 0 auto;
          max-width: 300px;
        }

        .v-avatar {
          margin: 0 auto 12px;
        }

        p {
          font-size: 1rem;
          max-width: 540px;
          margin: 0 auto;
          line-height: 1.3;
        }
      }

      .project-team-body {
        max-width: 540px;
        margin: 20px auto;

        .members-list {
          .empty-wrap {
            height: 110px;
            display: flex;
            justify-content: center;
            align-items: center;

            span {
              font-family: var(--font);
              color: var(--light-text);
            }
          }

          .invited-member {
            position: relative;
            display: flex;
            align-items: center;
            background: var(--white);
            padding: 12px;
            border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
            border-radius: 12px;
            margin-bottom: 12px;
            text-align: inset-inline-start;

            > img {
              display: block;
              width: 80px;
              height: 80px;
              border-radius: var(--radius-rounded);
              margin: 0 auto;
            }

            .meta {
              margin-inline-start: 12px;
              line-height: 1.1;

              > span {
                display: block;
                font-family: var(--font);
                font-size: 0.8rem;
                text-transform: uppercase;
                color: var(--light-text);
                padding: 8px 0 0;
              }

              > p {
                font-family: var(--font);
                margin-bottom: 0;
                font-weight: 500;
                color: var(--dark-text);
              }
            }

            .actions {
              margin-inline-start: auto;
              display: flex;
              align-items: center;

              .permissions {
                margin-inline-end: 30px;
                width: 180px;

                .permission-levels {
                  position: relative;
                  display: flex;
                  justify-content: space-between;

                  .permission-level {
                    position: relative;
                    cursor: pointer;
                    z-index: 1;

                    .permission-level-inner {
                      height: 11px;
                      width: 11px;
                      border-radius: var(--radius-rounded);
                      background: var(--placeholder);
                      transition:
                        color 0.3s,
                        background-color 0.3s,
                        border-color 0.3s,
                        height 0.3s,
                        width 0.3s;

                      &.is-active {
                        background: var(--primary);
                        transform: scale(1.1);
                      }
                    }
                  }

                  .permissions-progress {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    margin-bottom: 0;
                    z-index: 0;

                    &::-webkit-progress-value {
                      transition: width 0.5s ease;
                    }

                    &::-moz-progress-bar {
                      transition: width 0.5s ease;
                    }

                    &::-ms-fill {
                      transition: width 0.5s ease;
                    }
                  }
                }
              }

              .cancel-button {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 34px;
                width: 34px;
                border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
                box-shadow: var(--light-box-shadow);
                background: var(--white);
                padding: 0;
                transition:
                  color 0.3s,
                  background-color 0.3s,
                  border-color 0.3s,
                  height 0.3s,
                  width 0.3s;

                .iconify {
                  font-size: 12px;
                  color: var(--light-text);
                }
              }
            }
          }
        }
      }
    }

    .page-placeholder {
      align-items: flex-start;

      img {
        max-width: 210px;

        &.is-rounded {
          border-radius: var(--radius-rounded);
        }
      }
    }

    .uploader {
      max-width: 640px;
      margin: 0 auto;

      progress {
        vertical-align: baseline;
      }

      .progress {
        display: flex;
        height: 0.5rem;
        overflow: hidden;
        font-size: 0.75rem;
        background-color: #e9ecef;
        border-radius: 0.25rem;

        .progress-bar {
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          flex-direction: column;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          color: var(--white);
          text-align: center;
          background-color: var(--secondary);
          transition: width 0.6s ease;
        }

        .progress-bar-striped {
          background-image: linear-gradient(
            45deg,
            rgb(255 255 255 / 15%) 25%,
            transparent 25%,
            transparent 50%,
            rgb(255 255 255 / 15%) 50%,
            rgb(255 255 255 / 15%) 75%,
            transparent 75%,
            transparent
          );
          background-size: 1rem 1rem;
        }

        .progress-bar-animated {
          animation: progress-bar-stripes 1s linear infinite;
        }

        @keyframes progress-bar-stripes {
          from {
            background-position: 1rem 0;
          }

          to {
            background-position: 0 0;
          }
        }
      }

      .uploader-toolbar {
        display: flex;
        justify-content: space-between;
        margin: 0 0 20px;

        .left {
          .uploader-actions {
            @include vuero-l-card;

            display: flex;
            padding: 10px 16px;
            min-width: 180px;

            .uploader-action {
              display: flex;
              justify-content: center;
              align-items: center;
              flex: 1 1 0;

              .inner-action {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 32px;
                width: 32px;
                min-width: 32px;
                border-radius: var(--radius-rounded);
                color: color-mix(in oklab, var(--light-text), white 12%);
                border: none;
                background: none;
                cursor: pointer;
                transition:
                  color 0.3s,
                  background-color 0.3s,
                  border-color 0.3s,
                  height 0.3s,
                  width 0.3s;

                &:hover,
                &:focus:not(.is-active) {
                  background: color-mix(in oklab, var(--fade-grey), white 3%);
                  color: var(--light-text);
                }

                .iconify {
                  height: 18px;
                  width: 18px;
                  transition: stroke 0.3s;
                }
              }
            }
          }
        }

        .right {
          .fileupload-process {
            #total-progress {
              opacity: 0;
              transition: opacity 0.3s linear;
            }
          }
        }
      }

      .uploader-container {
        margin-bottom: 20px;

        .upload-wrapper {
          position: relative;

          .upload-box {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: var(--white);
            height: 120px;
            border-radius: 3px;
            padding: 8px;
            border: 2px dashed color-mix(in oklab, var(--fade-grey), black 4%);
            cursor: pointer;
            transition: all 0.3s; // transition-all test

            &:hover {
              border-color: var(--primary);

              .uploader-label {
                .lnil {
                  color: var(--primary);
                }
              }
            }

            .uploader-label {
              margin: 0 auto;
              text-align: center;

              h3 {
                font-family: var(--font);
                color: var(--light-text);
              }

              .lnil {
                font-size: 2.4rem;
                color: var(--placeholder);
                transition:
                  color 0.3s,
                  background-color 0.3s,
                  border-color 0.3s,
                  height 0.3s,
                  width 0.3s;
              }
            }
          }
        }
      }

      .template-list {
        .template-list-item {
          /* Hide the progress bar when finished */
          &.dz-success {
            .preview-box {
              .list-item-progress {
                .progress {
                  // opacity: 0;
                  transition: opacity 0.3s linear;
                }
              }

              .list-item-actions {
                /* Hide the start and cancel buttons and show the delete button */
                .start,
                .cancel {
                  display: none;
                }

                .delete {
                  display: block;
                }
              }
            }
          }

          .preview-box {
            display: flex;
            align-items: center;
            background: var(--white);
            width: 100%;
            border-radius: 12px;
            padding: 12px;
            border: 1px solid var(--fade-grey);
            margin-bottom: 16px;

            .preview {
              img {
                height: 50px;
                max-width: 50px;
                min-width: 50px;
                border-radius: var(--radius-rounded);
                object-fit: cover;
              }

              .icon {
                height: 50px;
                width: 50px;
                min-width: 50px;
                max-width: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0 auto;

                .iconify {
                  width: 28px;
                  height: 28px;
                }
              }
            }

            .list-item-meta {
              margin-inline-start: 12px;

              p {
                font-family: var(--font);

                &:first-child {
                  font-weight: 500;
                  font-size: 1.1rem;
                  color: var(--dark-text);
                }
              }
            }

            .list-item-progress {
              margin-inline-start: auto;
              margin-inline-end: 30px;
              min-width: 120px;

              .progress {
                .progress-bar {
                  width: 0%;
                }
              }
            }

            .list-item-actions {
              display: flex;

              .list-item-action {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 32px;
                min-height: 32px;
                width: 32px;
                min-width: 32px;
                border-radius: var(--radius-rounded);
                color: color-mix(in oklab, var(--light-text), white 12%);
                border: none;
                background: none;
                cursor: pointer;
                transition:
                  color 0.3s,
                  background-color 0.3s,
                  border-color 0.3s,
                  height 0.3s,
                  width 0.3s;

                &:hover,
                &:focus:not(.is-active) {
                  background: color-mix(in oklab, var(--fade-grey), white 3%);
                  color: var(--light-text);
                }

                .iconify {
                  height: 18px;
                  width: 18px;
                  transition: stroke 0.3s;
                }
              }

              /* Hide the delete button initially */
              .delete {
                display: none;

                &::before,
                &::after {
                  display: none !important;
                }
              }
            }
          }
        }
      }
    }

    .project-info {
      .project-info-head {
        .project-avatar-upload {
          text-align: center;

          .filepond-profile-wrap {
            display: block;
            margin: 0 auto 4px;

            /* stylelint-disable-next-line selector-class-pattern */
            .filepond--drop-label {
              background: var(--white);
              cursor: pointer;
            }
          }

          p {
            span {
              display: block;

              &:nth-child(2) {
                font-size: 0.9rem;
              }
            }
          }
        }

        .project-info {
          max-width: 480px;
          margin: 10px auto;

          .project-name {
            margin-bottom: 10px;

            .field {
              .control {
                .input {
                  font-family: var(--font);
                  text-align: center;
                  font-size: 1.2rem;
                  height: 50px;
                  padding: 0;
                  border-radius: 10px;
                }
              }
            }
          }

          .project-description {
            .field {
              .control {
                .textarea {
                  border-radius: 10px;
                  resize: none;
                }
              }
            }
          }
        }
      }
    }

    .project-dates {
      background: var(--white);
      padding: 16px;
      border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
      border-radius: 14px;
      max-width: 380px;
      margin: 20px auto;

      > h4 {
        font-family: var(--font);
        font-size: 0.8rem;
        text-transform: uppercase;
        text-align: center;
        margin-bottom: 8px;
        color: var(--light-text);
      }

      .project-dates-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .separator {
          height: 25px;
          width: 2px;
          border-inline-end: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
          margin: 0 12px;
        }

        .project-date {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-grow: 2;

          .date-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 28px;
            width: 28px;
            color: var(--light-text);

            .iconify {
              height: 18px;
              width: 18px;
            }
          }

          .control {
            max-width: 100px;

            .input {
              border: none;
              background: none;
              box-shadow: none;
              padding-inline-start: 4px;
              font-family: var(--font);
            }
          }
        }
      }
    }

    .project-budget {
      background: var(--white);
      padding: 16px;
      border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
      border-radius: 14px;
      max-width: 380px;
      margin: 20px auto;

      > h4 {
        font-family: var(--font);
        font-size: 0.8rem;
        text-transform: uppercase;
        text-align: center;
        margin-bottom: 16px;
        color: var(--light-text);
      }

      .project-budget-inner {
        display: flex;

        .budget-item {
          display: flex;
          justify-content: center;
          align-items: center;
          flex: 1 1 0;

          .budget-item-inner {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 32px;
            width: 65px;
            min-width: 50px;
            border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
            border-radius: 12px;
            font-family: var(--font);
            font-size: 0.9rem;
            color: color-mix(in oklab, var(--light-text), white 12%);
            margin: 0 8px;
            transition: all 0.3s; // transition-all test

            &:hover:not(.is-active) {
              // background: color-mix(in oklab, var(--fade-grey), white 3%);
              color: var(--light-text);
            }

            &.is-active {
              background: var(--primary);
              border-color: var(--primary);
              color: var(--smoke-white);
              box-shadow: var(--primary-box-shadow);
            }
          }
        }
      }
    }

    .project-customer {
      background: var(--white);
      padding: 16px;
      border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
      border-radius: 14px;
      max-width: 380px;
      margin: 20px auto;

      > h4 {
        font-family: var(--font);
        font-size: 0.8rem;
        text-transform: uppercase;
        text-align: center;
        margin-bottom: 16px;
        color: var(--light-text);
      }

      .field {
        .control {
          width: 100%;

          .input {
            width: 100%;
            border: none;
            background: none;
            box-shadow: none;
          }
        }
      }

      .media-flex,
      .media-flex-center {
        .v-avatar {
          .avatar {
            border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
          }
        }
      }
    }

    .wizard-types {
      max-width: 1100px;
      margin: 0 auto;

      .wizard-card {
        @include vuero-l-card;

        text-align: center;
        background: none;
        border: 1px solid transparent;
        padding: 30px;
        transition: all 0.3s; // transition-all test

        &:hover {
          background: var(--white);
          border-color: color-mix(in oklab, var(--fade-grey), white 3%);
          box-shadow: var(--light-box-shadow);

          .learn-more-link {
            a {
              opacity: 1;
              pointer-events: all;
            }
          }
        }

        img {
          display: block;
          max-width: 100%;
          margin: 0 auto;
          border-radius: 14px;
        }

        h3 {
          font-family: var(--font-alt);
          font-weight: 600;
          font-size: 1.1rem;
          color: var(--dark-text);
          text-align: center;
          margin: 16px 0 0;
        }

        p {
          font-size: 1.1rem;
          font-family: var(--font);
          color: var(--light-text);
          text-align: center;
          max-width: 240px;
          margin: 0 auto 20px;
        }

        .button-wrap {
          text-align: center;

          .button {
            margin: 0 auto;
            min-width: 140px;
          }
        }

        .learn-more-link {
          text-align: center;
          padding: 16px 0;

          a {
            text-transform: uppercase;
            font-size: 0.8rem;
            font-weight: 500;
            font-family: var(--font);
            color: var(--light-text);
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s; // transition-all test

            &:hover {
              color: var(--primary);
            }
          }
        }
      }
    }
  }
}

/* ==========================================================================
3. Wizard V1 Dark mode
========================================================================== */

.is-dark {
  .wizard-navigation {
    background: color-mix(in oklab, var(--dark-sidebar), black 2%);
    border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);

    .navbar-item {
      &.is-wizard-title {
        border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);

        .title-wrap {
          color: var(--dark-dark-text);
        }
      }

      &.is-dark-mode {
        .navbar-icon {
          background: color-mix(in oklab, var(--dark-sidebar), white 6%);
          border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
        }
      }
    }

    .wizard-dropdown,
    .user-dropdown {
      .dropdown-menu {
        border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
      }
    }
  }

  .wizard-buttons {
    background: color-mix(in oklab, var(--dark-sidebar), white 1%);
    border-color: color-mix(in oklab, var(--dark-sidebar), white 10%);

    .button {
      &.is-light {
        background: color-mix(in oklab, var(--dark-sidebar), white 4%);
        border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
        color: var(--dark-dark-text);

        &:hover,
        &:focus {
          color: var(--primary);
          border-color: var(--primary);
        }
      }
    }
  }

  .wizard-v1-wrapper {
    .step-content {
      .project-preview-wrapper {
        .project-preview-loader {
          background: color-mix(in oklab, var(--dark-sidebar), white 10%);
        }

        .project-preview-header {
          .v-avatar {
            .edit-icon {
              border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
              background: color-mix(in oklab, var(--dark-sidebar), white 6%);
            }
          }
        }

        .project-preview-body {
          .edit-box {
            @include vuero-card--dark;

            > h4 {
              color: var(--dark-dark-text);
            }

            .edit-icon {
              border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
              background: color-mix(in oklab, var(--dark-sidebar), white 2%);

              .iconify {
                color: var(--light-text);
              }
            }

            .estimated-budget,
            .estimated-due-date,
            .attachments {
              > span,
              .date,
              .budget {
                color: var(--primary);
              }
            }
          }
        }
      }

      .tools-wrapper {
        .tool-card {
          input:checked + .tool-card-inner {
            border-color: var(--primary) !important;
          }

          .tool-card-inner {
            border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
            background: color-mix(in oklab, var(--dark-sidebar), white 6%);

            .media-flex-center {
              .flex-end {
                .checkmark {
                  border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
                  background: color-mix(in oklab, var(--dark-sidebar), white 2%);
                  color: var(--primary);
                }
              }
            }
          }
        }
      }

      .project-team-wrapper {
        .project-team-body {
          .members-list {
            .invited-member {
              border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
              background: color-mix(in oklab, var(--dark-sidebar), white 6%);

              .actions {
                .permissions {
                  .permission-levels {
                    .permission-level {
                      .permission-level-inner {
                        background: color-mix(in oklab, var(--dark-sidebar), white 18%);

                        &.is-active {
                          background: var(--primary);
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      .uploader {
        .uploader-toolbar {
          .left {
            .uploader-actions {
              .uploader-action {
                .inner-action {
                  &:hover {
                    background: color-mix(in oklab, var(--dark-sidebar), white 14%);
                  }
                }
              }
            }
          }
        }

        .uploader-container {
          .upload-wrapper {
            .upload-box {
              border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
              background: color-mix(in oklab, var(--dark-sidebar), white 2%);

              &:hover,
              &:focus {
                border-color: var(--primary);

                .uploader-label {
                  .iconify {
                    color: var(--primary);
                  }
                }
              }
            }
          }
        }

        .template-list {
          .template-list-item {
            .preview-box {
              border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
              background: color-mix(in oklab, var(--dark-sidebar), white 6%);

              .list-item-meta {
                .name {
                  color: var(--dark-dark-text);
                }
              }

              .list-item-progress {
                .size strong {
                  color: var(--dark-dark-text);
                }

                .progress {
                  background: color-mix(in oklab, var(--dark-sidebar), white 2%);
                }
              }

              .list-item-actions {
                .list-item-action {
                  &:hover {
                    background: color-mix(in oklab, var(--dark-sidebar), white 12%);
                  }
                }
              }
            }
          }
        }
      }

      .input {
        &.is-dark-focus:focus {
          border-color: var(--primary) !important;
        }
      }

      .wizard-types {
        .wizard-card {
          background: none;
          border-color: transparent;

          &:hover,
          &:focus {
            background: color-mix(in oklab, var(--dark-sidebar), white 6%);
            border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
          }
        }
      }

      .project-info {
        .project-info-head {
          .project-avatar-upload {
            .filepond-profile-wrap {
              /* stylelint-disable-next-line selector-class-pattern */
              .filepond--drop-label {
                background: color-mix(in oklab, var(--dark-sidebar), white 2%);
              }
            }
          }
        }
      }

      .project-customer {
        background: color-mix(in oklab, var(--dark-sidebar), white 6%);
        border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);

        .media-flex-center {
          .v-avatar {
            .avatar {
              border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
            }
          }
        }
      }

      .project-dates {
        background: color-mix(in oklab, var(--dark-sidebar), white 6%);
        border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);

        .project-dates-inner {
          .separator {
            border-color: color-mix(in oklab, var(--dark-sidebar), white 20%);
          }
        }
      }

      .project-budget {
        background: color-mix(in oklab, var(--dark-sidebar), white 6%);
        border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);

        .project-budget-inner {
          .budget-item {
            .budget-item-inner {
              background: color-mix(in oklab, var(--dark-sidebar), white 4%);
              border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);

              &.is-active {
                border-color: var(--primary);
                background: var(--primary);
                box-shadow: var(--primary-box-shadow);
              }
            }
          }
        }
      }
    }
  }
}

/* ==========================================================================
4. Media Queries
========================================================================== */

@media only screen and (width <= 767px) {
  .wizard-navigation {
    .navbar-item {
      &.is-wizard-title {
        .title-wrap {
          span {
            display: none;
          }
        }
      }
    }
  }

  .wizard-v1-wrapper {
    .step-content {
      .project-budget {
        .project-budget-inner {
          .budget-item {
            .budget-item-inner {
              width: 58px;
            }
          }
        }
      }

      .uploader {
        .template-list {
          .template-list-item {
            .preview-box {
              .list-item-progress {
                min-width: 80px;
                max-width: 80px;
                margin-inline-end: 20px;
              }
            }
          }
        }
      }

      .project-team-wrapper {
        .project-team-body {
          .members-list {
            .invited-member {
              position: relative;
              flex-direction: column;
              padding: 30px;

              .meta {
                margin-bottom: 10px;

                p {
                  font-size: 1.2rem;
                }
              }

              .actions {
                margin: 10px auto;

                .permissions {
                  margin: 0;
                }

                .button {
                  &.is-circle {
                    position: absolute;
                    top: 10px;
                    inset-inline-end: 10px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

@media only screen and (width >= 768px) and (width <= 1024px) and (orientation: portrait) {
  .wizard-v1-wrapper {
    .step-content {
      .wizard-types {
        .columns {
          display: flex;
        }
      }

      .tools-wrapper {
        .columns {
          display: flex;

          .column.is-4 {
            min-width: 50% !important;
          }
        }
      }

      .project-preview-wrapper {
        .project-preview-body {
          .columns {
            display: flex;

            .column {
              &.is-tablet-33 {
                min-width: 33.3% !important;
              }

              &.is-tablet-50 {
                min-width: 50% !important;
              }

              &.is-tablet-100 {
                min-width: 100% !important;
              }
            }
          }
        }
      }
    }
  }
}
</style>
