@import "admin-dashboard/main_dependencies";
$cc-primary: $bb-secondary;
$cc-secondary: #003454;

.booking-item {
  border-top: solid 1px #eee;
  padding: 20px;

  span.box-title {
    font-weight: 600;
    font-size: 16px;
  }

  span.box-title.updated {
    color: #05a45c;
  }

  span.box-title.cancelled {
    color: #C82028;
  }

  .btn--link {
    border: none;
    text-decoration: underline;
    color: $cc-primary;
    font-weight: 600;
    background: transparent;
    padding: 0;
  }

  .box-header {
    padding: 10px 0 !important;
    border-bottom: solid 1px #eee;
  }

  .booking-info-box .box-body {
    padding: 10px 0 !important;
  }

  &:first-child .booking-info-box {
    border-right: solid 1px #eee;
  }

  ul.info-details:nth-of-type(2) {
    border-top: solid #EEEEEE 1px;
  }

  ul.info-details li {
    padding: 10px 0;
    color: #333;
    font-weight: 500;
  }

  ul.info-details li span {
    min-width: 30%;
  }

  ul.info-details li span.detail-label {
    color: $cc-secondary;
  }

  ul.info-details span {
    display: inline-block;
  }

  ul.booking-actions li {
    padding: 10px 0px;

    .btn-primary {
      display: inline-block;
      width: 110px;
      margin: 5px 5px 5px 0;
    }
  }
}

.booking-item.updated,
.booking-item.cancelled {
  border-radius: 2px;
}

.booking-item.updated {
  background-color: #f5fcf9;
  border: solid 1px #05a45c;
  animation: fadeOutSuccess 2s ease 4s forwards;
}

.booking-item.cancelled {
  background-color: lighten(#C82028, 50);
  border: solid 1px #C82028;
  animation: fadeOutDanger 2s ease 4s forwards;
}

.add-notes {
  .btn-primary {
    margin-right: 15px;
  }
}