//@import "style.less";
@import "colors.less";

.steps_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.steps {
    margin-bottom: 35px;
    width: 100%;
    line-height: 1.142rem;
    box-sizing: border-box;
    height: 6.7rem;
    padding: 1rem 4rem 1rem 2rem;
    display: flex;
}

.step {
    text-decoration: none;
    display: block;
    padding: 18px 0px 18px 70px;
    width: calc(33%);
    height: 100%;
    vertical-align: middle;
    position: relative;
    background: var(--secondary);
    color: @white;
}

.steps :first-child {
    border-bottom-left-radius: 2rem;
}

.step span.number{
  position: absolute;
  top: 1.9rem;
  left: 3rem;
  font-size: 3.6rem;
  font-weight: bold;
}

.step:after {
    content: "";
    position: absolute;
    z-index: 5;
    right: -4.9rem;
    top: 0px;
    height: 4.8rem;
    width: 5rem;
    background: var(--secondary);
    clip-path: polygon(0 0, 0% 100%, 40% 50%);
}

.step:before {
    content: "";
    position: absolute;
    z-index: 3;
    right: -5.2rem;
    top: 0px;
    height: 4.8rem;
    width: 5.2rem;
    background: @white;
    clip-path: polygon(0 0, 0% 100%, 40% 50%);
}

a.step {
    &:hover, &:focus {
        color: var(--primary);
    }
}

.step-content .title {
    text-transform: capitalize;
}

.step.active {
    z-index: 2;
    background: var(--primary);
    color: @white;
    b.number{
        color: @white;
    }
    &:after
    {
      background: var(--primary);
    }
}

.price_wrapper {
    span {
        font-size: 3rem;
        color: var(--primary);
    }
}

.domain_info {
    .header {
        span{
            width: 100%;
            height: 100%;
            .fx;
            .fxa;
            .fxc;
            &::before {
                font-size: 9rem;
                color: @blue;
            }
        }
    }
    .body {}
}

.basket-add {
    .number, .number-list {
        overflow: hidden;
        .number_button {
            font-size: 2rem;
            cursor: pointer;
            background-color: var(--primary);
            &:hover, &:focus {
                background-color: var(--secondary);
            }
        }
    }
}

.productWrapper div{
    .uk-card div picture{
        max-height: 27rem;
        min-height: 27rem;
        height: 27rem;
    }
}