@import 'variables';
@import 'functions';

// VARIABLES
$inactiveColor: #e2e2eb;
$activeColor: $tf-theme-color;
$textColor: #fff;

.twofas-breadcrumb {
  margin-bottom: 63px;
  padding-top: 36px;
  margin-left: auto;
  margin-right: auto;
  max-width: 736px;
  width: 100%;

  @media all and (max-width: 500px) {
    margin-bottom: 20px;
  }

  &::after {
    content: '';
    display: table;
    clear: both;
  }

  &-step {
    float: left;
    position: relative;
    text-align: center;
    width: 33.3%;

    &.active {
      .twofas-breadcrumb-step-number {
        background-color: $activeColor;
      }

      .twofas-breadcrumb-step-text {
        color: $activeColor;
      }
    }

    &::after,
    &::before {
      background-color: $inactiveColor;
      height: 2px;
      position: absolute;
      top: 17px;
      width: calc(50% - 34px / 2 - 25px);

      @media all and (max-width: 500px) {
        width: calc(50% - 34px / 2 - 10px);
      }
    }

    &:first-of-type,
    &:nth-of-type(2) {
      &::after {
        content: '';
        display: block;
        right: 0;
      }
    }

    &:nth-of-type(2),
    &:nth-of-type(3) {
      &::before {
        content: '';
        display: block;
        left: 0;
      }
    }

    &-number {
      border-radius: 50%;
      background-color: $inactiveColor;
      color: $textColor;
      display: inline-block;
      font-size: px-to-rem(14);
      font-weight: 700;
      height: 34px;
      line-height: 34px;
      margin-bottom: 12px;
      text-align: center;
      width: 34px;
    }

    &-text {
      color: $inactiveColor;
      font-size: px-to-rem(14);
      font-weight: 500;
      line-height: px-to-rem(17);

      @media all and (max-width: 500px) {
        display: none;
      }
    }
  }
}