@import '~styles/variables.less';
@medium-query: ~'(max-width: 920px)';
@small-query: ~'(max-width: 480px)';

.ProposalMilestones {
  width: 100%;

  .ant-steps-customization();

  .ant-steps-item-title > div {
    position: relative;
  }
  &.do-titles-overflow {
    .ant-steps-item,
    .ant-steps-item-icon {
      margin-right: 0.4rem;
    }
    .ant-steps-item-title {
      width: 0;
      padding-right: 0;
      color: rgba(0, 0, 0, 0) !important;

      & > div {
        position: absolute;
      }
    }

    .ProposalMilestones-milestone-title {
      display: block;
    }
  }

  &-milestone {
    min-height: 15rem;
    margin-top: 2rem;

    @media @small-query {
      margin-top: 0;
      margin-left: 0;
    }

    &-alert {
      width: fit-content;
      margin: 0 0 1rem 0;
    }

    &-title {
      display: none;
      white-space: nowrap;
      font-size: 1.5rem;
      margin-bottom: 0;
      transform: translateY(-0.5rem);
      @media @small-query {
        display: block !important;
      }
    }

    &-status {
      white-space: nowrap;
      @media @small-query {
        margin-bottom: 0.6rem;
      }

      & > div {
        margin-bottom: 1rem;
        font-size: 0.9rem;
        opacity: 0.8;
        display: inline-block;
        @media @small-query {
          margin-bottom: 0;
          display: block;
        }
      }

      & > div + div {
        padding-left: 0.5em;
        margin-left: 0.5em;
        border-left: 1px solid rgba(0, 0, 0, 0.35);
        @media @small-query {
          padding-left: 0;
          margin-left: 0;
          border-left: none;
        }
      }
    }

    &-body {
      display: flex;

      @media @medium-query {
        flex-direction: column;
        margin-left: 0.4rem;
      }
    }

    &-description {
      font-size: 1.1rem;
    }

    &-description,
    &-action {
      flex: 1;
    }

    &-action {
      q {
        display: block;
        margin-bottom: 0.5rem;
        background: rgba(0, 0, 0, 0.06);
        padding: 0.5rem;
      }

      h3 {
        font-size: 1rem;
        text-align: center;
      }

      &-controls {
        display: flex;

        & > * {
          flex-grow: 1;
        }
        & > * + * {
          margin-left: 0.5rem;
        }
      }
    }

    &-divider {
      width: 1px;
      background: rgba(0, 0, 0, 0.05);
      margin: 0 2rem;

      @media @medium-query {
        height: 1px;
        width: 100%;
        margin: 1rem 0;
      }
    }
  }
}

.ant-steps-customization() {
  @media @small-query {
    display: flex;
    .ant-steps {
      width: 50px;
      margin-left: -2rem;
      .ant-steps-item {
        margin-right: 0;
      }
      .ant-steps-item-title {
        display: none;
      }
    }
  }

  .ant-steps-item {
    cursor: pointer;
  }

  .ant-steps-item-override(@status, @color, @title-color) {
    .ant-steps-item-@{status} {
      &.is-active {
        .ant-steps-item-icon {
          background: @color;
          border-color: @color;
          & > .ant-steps-icon {
            color: #fff;
            font-weight: 600;
          }
        }
        .ant-steps-item-title {
          color: @title-color;
        }
      }
    }
  }
  .ant-steps-item-override(wait, @primary-color, @text-color);
  .ant-steps-item-override(finish, @primary-color, @text-color);
  .ant-steps-item-override(error, @error-color, @error-color);

  .ant-steps-item-process {
    &.is-inactive {
      .ant-steps-item-icon {
        background: #fff;
        border-color: @primary-color;
        & > .ant-steps-icon {
          color: @primary-color;
        }
      }
    }
  }
}