// variables

$primaryColor: #03A9F4;
$primaryColor: #0D1D3B;
$buttonColor: #C92E5C;
$buttonColor: #3AADF4;
$titleFont: 'Montserrat', sans-serif;
$titleColor: white;

//  variables: timeline and dot

$timelineWidth: 2px;
$dotRadius: 3px;
$dotBorder: 2px;
$dotMarginTop: 4px;

$timelineColor: $primaryColor;
$dotColor: $primaryColor;

// styles
:host {
  display: flex;
}

md-card {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;

  transition: background-color .2s ease, box-shadow 200ms cubic-bezier(.4,0,.2,1);

  &.assigning {
    // background-color: rgb(252, 252, 252);
    box-shadow: 0 5px 3px -2px rgba(0,0,0,.4), 0 3px 2px 0 rgba(0,0,0,.2), 0 2px 5px 0 rgba(0,0,0,.2);
  }

  position: relative;

  .saving {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 10;
    justify-content: center;
    display: flex;
    align-items: center;
  }
}

md-card-title {
  // remove md-card padding for this component
  margin: -24px -24px 0 !important;
  padding: 24px;

  color: $titleColor;
  background-color: $primaryColor;

  font-family: $titleFont;
}

md-card-content {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.timeline {
  // border-left: $timelineWidth solid $timelineColor;

  // extend timeline to be next to reassign button
  // padding-bottom: 2rem;
  // margin-bottom: -2rem;

  .patient {

    $paddingTop: 20px;
    $paddingLeft: 20px;

    position: relative;
    padding: $paddingTop 10px 10px $paddingLeft;
    border-left: $timelineWidth solid #0D1D3B;

    &:last-child {
      margin-left: $timelineWidth;
      border: none;

      .timeline-end {
        position: absolute;
        width: $timelineWidth;
        background: #0D1D3B;
        height: $paddingTop + $dotMarginTop;
        margin-top: -$paddingTop;
        margin-left: -2 - $paddingLeft;
      }
    }

    .dot {
      position: absolute;
      left: -3 -$dotRadius + $timelineWidth - $dotBorder;
      width: 2*$dotRadius;
      height: 2*$dotRadius;
      border-radius: 100%;
      display: block;
      margin: 0 auto;
      background: white;
      margin-top: $dotMarginTop;
      border: $dotBorder solid $primaryColor;
    }

    .title {
      font-family: $titleFont;
      font-size: 16px;
      padding: 0;
      margin: 0;
      // align with box-assignment title when switching
      margin-left: -2px;

      // for showing the virtualbox time

      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        font-size: 12px;
        color: #808080;
      }
    }

    .data {
      font-family: 'Open-Sans', sans-serif;
      margin-left: 10px;
      font-size: 14px;

      md-spinner {
        width: 1em;
        height: 1em;
        display: inline-block;
        padding: 0;
        vertical-align: middle;
      }

      .recording {
        padding: 1px 0;

        .alias {
          color: #C92E5C;
          padding-right: .5em;
          font-weight: bold;
        }

        .date {
          float: right;
          color: #757575;
        }
      }
    }
  }
}

.button {
  color: white;
  background-color: $buttonColor;
  // border-radius: 25px;

  // fix to stop ripple effect breaking out of button (noticable with rounded corners):
  // fill space outside of button with empty pixels;
  -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC");
}

md-card-actions {
  display: flex;
  flex-direction: row-reverse;
}

.box-assignment {
  padding: 10px;
}

/*
 * @flip-hide
 * class construction to allow hiding and swapping of elements
 * while still containing the container's height
 */
.flip-hide-container {
  display: flex;
  flex-direction: row;

  > * {
    box-sizing: border-box;
  }

  > :not(.flip-hide) {
    order: 1;
    flex: 1 0 100%;
  }

  > .flip-hide {
    order: 0;
    visibility: hidden;
    flex: 1 0 100%;
    margin-left: -100%;
    width: 0;
  }
}