/*#############################################################################
# BLOCKS
#############################################################################*/


.block-title {
  margin-top: 0;

  br {
    display: none;
  }

  &.margin {
    margin: 0 0 50px;
  }

  @include responsive($breakpoint-xmedium) {
    br {
      display: block;
    }
  }
}

.blocks-wrapper {
  .block-step {
    border-bottom: 1px solid $color-secondary-light;
    margin-bottom: 20px;
    padding-bottom: 20px;
    max-width: 300px;

    &:last-child {
      border: none;
      margin: 0;
      padding: 0;
    }

    .block-step-number {
      margin: 0;
    }

    .block-step-title {
      margin: 0;
    }

    .block-step-description {
      margin: 0 0 10px;
    }

    .progress-bar {
      margin: 0 0 10px;
    }

    a.button, button.button {
      margin: 0;
    }

    // Disabled State
    &.disabled > * {
      opacity: 0.3;
    }

    // Completed state
    &.completed {
      position: relative;

      &::after {
        display: block;
        content: "";
        background: url("/assets/swl/interface/icons/check-green-circle-large.svg") no-repeat 0 0;
        width: 32px;
        height: 32px;
        position: absolute;
        top: 50%;
        right: 0;
        @include transform(translate(60px, -50%));

        @include responsive-max($breakpoint-small) {
          top: 10%;
          right: 18%;
        }
      }
    }
  }
}

.block-main {
  .card {
    max-width: 340px;
    @include float(right);
    clear: both;
  }
}

.response-handler {
  &.centered {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}