// Partials / Box Row

.box-row{
  position:relative;
  background-color:$white;
  border-radius:4px;
  margin-bottom:15px;

  &.open{
    .box-row-header{
      background-color:$box-row-near-white;
      border-radius:4px 4px 0 0;
    }
  }

  &.highlight{
    background-color:$blue;

    &:before{
      content:'';
      position:absolute;
      border:1px solid $blue;
      left:-3px;
      top:-3px;
      right:-3px;
      bottom:-3px;
      border-radius:6px;
    }

    .box-row-header{
      .title,
      .description{
        color:$white;
      }

      .description{
        color:alpha($white,65);
        b{
          color:$white;
        }
      }
    }
  }

  .box-row-header{
    display:flex;
    justify-content:space-between;
    padding:24px;

    .title,
    .description{
      font-size:15px;
      line-height:19px;
    }

    .title{
      font-weight:600;
      color:$blue;
    }

    .description{
      text-align:right;
      color:alpha($black,45);

      b{
        color:$black;
        font-weight:600;
      }
    }
  }

  .box-row-content{
    padding:24px;
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    justify-content:space-between;
    border-bottom:1px solid $box-row-border-color;
    color:$black;
    font-size: 13px;
    line-height: 19px;
    font-weight: 400;

    &:last-child{
      border-bottom:none;
    }

    .actions{
      width:100%;
      margin-top:5px;
    }
  }
}

@include breakpoint($phone){
  .box-row{
    .box-row-header{
      padding:17px;
  
      .title,
      .description{
        font-size:13px;
        line-height:17px;
      }
    }

    .box-row-content{
      padding:17px;
    }
  }
}
