@import '../../app.less';

.navigation {

  text-align: center;
  display: flex;
  overflow: hidden;

  .item {
    flex: 1;
    position: relative;
    cursor: pointer;
    transition: all 0.3s;
  }

  &.process {
    height: 44px;
    line-height: 44px;
    color: #fff;

    .item {
      background: #006DAA;

      .text {
        margin-left: 5px;
      }
    }

    .item:first-child:before {
      display: none;
    }

    .item:before {
      content: '';
      position: absolute;
      height: 0;
      width: 0;
      top: -16px;
      left: 0;
      right: -34px;
      border-width: 38px 19px;
      z-index: 1;
      border-style: solid;
      border-color: transparent;
      border-left-color: #fff;
      transition: all 0.3s;
    }

    .item:after {
      content: '';
      position: absolute;
      height: 0;
      width: 0;
      right: -22px;
      border-width: 22px 11px;
      z-index: 2;
      border-style: solid;
      border-color: transparent;
      border-left-color: #006DAA;
      transition: all 0.3s;
    }

    .item.active,
    .item.active:hover {
      color: #fff;
      background: #003366;
    }

    .item.active:after,
    .item.active:hover:after {
      border-left-color: #003366;
    }

    .item:hover {
      color: #fff;
      background: darken(#006DAA, 5);
    }

    .item:hover:after {
      border-left-color: darken(#006DAA, 5);
    }
  }

  &.detail {
    margin: 0 -2.5px;
    width: 100%;
    border-bottom: 1px solid #ECEDEE;
    height: 32px;
    line-height: 32px;
    color: #A7A7B7;

    .item {
      background: #ECEDEE;
      margin: 0 2.5px;
    }

    .item.active,
    .item.active:hover,
    .item:hover {
      color: #fff;
      background: #4299FF;
    }
  }

}