/* Container Wizard Right per versione mobile */
#edit-wizard-right-mobile,
#edit-wizard-right-mobile > legend {
  /* di default nascosto, viene mostrato tramite le regole specifiche
     per mobile o per la modalità desktop "right_mobile" */
  display: none;
}

/* Mostro il pannello mobile nella versione realmente mobile */
body.is-mobile {
  #edit-wizard-right-mobile,
  #edit-wizard-right-mobile > legend {
    display: block;
  }
}

.block-newcom-wizard fieldset#edit-wizard-right-mobile {
  --width: 290px;

  position: fixed;
  top: 50%;
  right: calc(var(--width) * -1 - 2px);
  -webkit-transition: 0.6s ease-in-out;
  transition: 0.6s ease-in-out;
  z-index: 99;

  &[data-status="opened"] {
    right: -1px;
  }

  .block-wrapper {
    position: relative;
  }

  #edit-button,
  #edit-container {
      position: absolute;
      top: 50%;
      top: calc(50% + 36px); /* compenso con metà dell'altezza dell'header */
      transform: translateY(-50%);
      right: 0px;
  }

  /* Pulsante per aprire e chiudere preview */
  #edit-button {
    right: var(--width);
    width: 45px;
    height: 80px;
    background-color: #eee;
    border: 1px solid #d5d5d5;
    border-right: 0px;
    border-radius: 5px 0px 0px 5px;
    z-index: 999;

    .form-item-wrapper {
      float: left;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .icon {
      display: inline-block;
      width: 30px;
      cursor: pointer;
    }

     /* height: 2px => translateY: 440% */
     /* height: 4px => translateY: 180% */
     /* height: 8px => translateY: 50% */
    .icon .rect {
      --deg: 45deg;
      --translateY: 440%;
      --translateX: 0px;
      height: 2px;
      margin: 0px;
      background: #000;
      -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        transform-origin: center center;

        &.tr {
          transform: translateX(calc(var(--translateX) * -1)) translateY(calc(var(--translateY) * -1)) rotate(calc(var(--deg) * -1));
        }

        &.br {
          transform: translateX(var(--translateX)) translateY(var(--translateY)) rotate(var(--deg));
        }
    }
  }

  /* Container */
  #edit-container {
    background-color: #eee;
    border: 1px solid #d5d5d5;
    border-radius: 0.5rem 0 0 0.5rem;
    margin: 0;
    z-index: 998;
  }

  fieldset#edit-wizard-right {
    display: block;
    width: var(--width);
    padding: 0.5rem 0.5rem;
    border: 0;
    background-color: #fff;

    > .fieldset-wrapper {
      padding: 0.5rem;
      border-radius: 0.5rem;
      background-color: #fff;
    }
  }

  /* Aperto */
  &[data-status="opened"] {
    #edit-button {
      .icon .rect {
        --translateX: 0%;
        --translateY: 50%;

        &.tr {
          transform: translateX(var(--translateX)) translateY(var(--translateY)) rotate(var(--deg));
        }

        &.br {
          transform: translateX(calc(var(--translateX) * -1)) translateY(calc(var(--translateY) * -1)) rotate(calc(var(--deg) * -1));
        }
      }
    }
  }
}

/* Solo Desktop */
body.is-desktop {
  /* In desktop NASCONDO il pannello mobile solo se il wizard non è in modalità "right_mobile" */
  .block-newcom-wizard:not([data-wizard-right-mode="right_mobile"]) #edit-wizard-right-mobile,
  .block-newcom-wizard:not([data-wizard-right-mode="right_mobile"]) #edit-wizard-right-mobile > legend,
  .block-newcom-wizard:not([data-wizard-right-mode="right_mobile"]) .wizard-right-mobile-button-container {
    display: none !important;
  }

  /* In desktop, se il wizard è in modalità "right_mobile", mostro il pannello mobile e il relativo pulsante */
  .block-newcom-wizard[data-wizard-right-mode="right_mobile"] #edit-wizard-right-mobile,
  .block-newcom-wizard[data-wizard-right-mode="right_mobile"] #edit-wizard-right-mobile > legend,
  .block-newcom-wizard[data-wizard-right-mode="right_mobile"] .wizard-right-mobile-button-container {
    display: block;
  }

  /* Nascondo i pannelli destro e bottom standard direttamente sotto il wizard,
     perché il contenuto viene gestito dalla versione mobile a comparsa. */
  .block-newcom-wizard[data-wizard-right-mode="right_mobile"] > form > fieldset#edit-wizard-right,
  .block-newcom-wizard[data-wizard-right-mode="right_mobile"] > form > fieldset#edit-wizard-bottom {
    display: none;
  }

  /* Modalità "right_mobile" */
  .block-newcom-wizard[data-wizard-right-mode="right_mobile"] {
    fieldset#edit-wizard-right-mobile {
      --width: 340px;
    }
  }
}