hunk.code_window:         position: relative;
           @include media-breakpoint-up(md) {
               margin-top: $tmp-dot-radius + $o-wsale-wizard-thickness*3.5;
               float: left;
               width: percentage(1/3);
               .o_wizard_has_extra_step + & {
                   width: percentage(1/4);
               }
           }
           @include media-breakpoint-down(md) {
               &.disabled, &.complete {
  
hunk.labels: keep keep keep keep replace replace replace replace replace replace keep keep keep
hunk.file_path: addons/website_sale/static/src/scss/website_sale_frontend.scss
hunk.type: replace
file: //## Website Sale frontent design
  //## ----------------------------
  
  // Theming variables
  $o-wsale-wizard-thickness: 0.125rem;
  $o-wsale-wizard-dot-size: 0.625rem;
  $o-wsale-wizard-dot-active-glow: 0.25rem;
  
  $o-wsale-wizard-color-inner: white;
  $o-wsale-wizard-color-default: map-get($grays, '200');
  
  $o-wsale-wizard-dot-active: map-get($theme-colors, 'primary');
  $o-wsale-wizard-dot-completed: map-get($theme-colors, 'success');
  
  $o-wsale-wizard-label-default: $text-muted;
  $o-wsale-wizard-label-active: $body-color;
  $o-wsale-wizard-label-completed: $success;
  
  .progress-wizard {
      // Scoped variables
      $tmp-dot-radius: ($o-wsale-wizard-dot-size + $o-wsale-wizard-thickness)*0.5;
      $tmp-check-size: max($font-size-base, $o-wsale-wizard-dot-size + $o-wsale-wizard-thickness + $o-wsale-wizard-dot-active-glow*2);
      $tmp-check-pos: $o-wsale-wizard-dot-size*0.5 - $tmp-check-size*0.5;
  
      margin-top: $grid-gutter-width*0.5;
      padding: 0 $grid-gutter-width*0.5;
  
      @include media-breakpoint-up(md) {
          padding: 0;
      }
  
      .progress-wizard-step {
          position: relative;
  
          @include media-breakpoint-up(md) {
              margin-top: $tmp-dot-radius + $o-wsale-wizard-thickness*3.5;
              float: left;
              width: percentage(1/3);
  
              .o_wizard_has_extra_step + & {
                  width: percentage(1/4);
              }
          }
          @include media-breakpoint-down(md) {
              &.disabled, &.complete {
                  display:none;
              }
          }
          .progress-wizard-dot {
              width: $o-wsale-wizard-dot-size;
              height: $o-wsale-wizard-dot-size;
              position: relative;
              display: inline-block;
              background-color: $o-wsale-wizard-color-inner;
              border-radius: 50%;
              box-shadow: 0 0 0 $o-wsale-wizard-thickness $o-wsale-wizard-color-default;
  
              @include media-breakpoint-up(md) {
                  @include o-position-absolute($left: 50%);
                  margin: (-$tmp-dot-radius) 0 0 (-$o-wsale-wizard-dot-size*0.5);
              }
          }
  
          .progress-wizard-steplabel {
              color: $o-wsale-wizard-label-default;
              margin: 5px 0 5px 5px;
              font-size: $font-size-base;
              display: inline-block;
  
              @include media-breakpoint-up(md) {
                  display: block;
                  margin: (0.625rem + $tmp-dot-radius) 0 20px 0;
              }
              @include media-breakpoint-down(md) {
                  margin-left: -15px;
                  font-size: 24px;
              }
          }
  
          .progress-wizard-bar {
              height: $o-wsale-wizard-thickness;
              background-color: $o-wsale-wizard-color-default;
          }
  
          &.active {
              .progress-wizard-dot {
                  animation: fadeIn 1s ease 0s 1 normal none running;
                  background: $o-wsale-wizard-dot-active;
                  box-shadow: 0 0 0 ($o-wsale-wizard-dot-active-glow - 0.0625rem) $o-wsale-wizard-color-inner,
                              0 0 0 $o-wsale-wizard-dot-active-glow rgba($o-wsale-wizard-dot-active, 0.5);
              }
  
              .progress-wizard-steplabel {
                  color: $o-wsale-wizard-label-active;
                  font-weight: bolder;
              }
          }
  
          &.complete {
              .progress-wizard-dot {
                  background: none;
                  box-shadow: none;
  
                  &:after {
                      @include o-position-absolute($tmp-check-pos, $left: $tmp-check-pos);
                      width: $tmp-check-size;
                      height: $tmp-check-size;
                      border-radius: 100%;
  
                      background: $o-wsale-wizard-color-inner;
                      color: $o-wsale-wizard-dot-completed;
                      text-align: center;
                      line-height: 1;
                      font-size: $tmp-check-size;
                      font-family: FontAwesome;
  
                      content: "\f058";
                  }
              }
  
              .progress-wizard-steplabel {
                  color: $o-wsale-wizard-label-completed;
              }
  
              &:hover:not(.disabled) {
                  .progress-wizard-dot:after {
                      color: $o-wsale-wizard-label-completed;
                  }
  
                  .progress-wizard-steplabel {
                      color: $o-wsale-wizard-label-active;
                  }
              }
          }
  
          &.disabled {
              cursor: default;
          }
      }
  }
  
  .o_wsale_image_viewer {
      z-index: -1;
  
      .o_wsale_image_viewer_header {
          height: 40px;
          z-index: 1;
      }
  
      .o_wsale_image_viewer_image {
          .o_wsale_image_viewer_void {
              padding-top: 64px;
              padding-bottom: 156px;
          }
  
          img {
              cursor: zoom-in;
          }
      }
  
      .o_wsale_image_viewer_carousel {
          z-index:1;
  
          ol {
              list-style: none;
  
              .o_wsale_image_viewer_thumbnail {
                  width: 128px;
                  height: 128px;
              }
  
              li img{
                  border: 1px solid #CED4DA;
  
                  &.active {
                      border-color: #35979c;
                  }
              }
          }
      }
  
      .o_wsale_image_viewer_control {
          z-index: 1;
          width: 40px;
          height: 40px;
  
          &:hover {
              background-color: rgba($gray-400, 0.1);
          }
  
          &.o_wsale_image_viewer_previous {
              margin: 1px 1px 0 0; // not correctly centered for some reasons
          }
  
          &.o_wsale_image_viewer_next {
              margin: 1px 0 0 1px; // not correctly centered for some reasons
          }
      }
  }
  