@import (reference) "fonts";
@import (reference) "colors";

@circle-dim: 28px;

.msvc {
  &__header {
    height: 200px;
    background: @color--gray-dark;
    position: relative;
    color: @color--white;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  &__title {
    .font--header(20px);
    color: @color--white;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.15em;
  }

  &__progress {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: -15px;
    display: flex;

    &-circle {
      height: @circle-dim;
      width: @circle-dim;
      border-radius: 100%;
      background: @color--gray-light;
      border: 2px solid @color--gray-light;
      display: flex;
      margin: 0 18px;
      align-items: center;

      i {
        margin: 0 auto;
      }

      &.m--done {
        background: darken(@color--gray-dark, 20%);
      }
    }
  }
}