// Card component
$sb-card-width: calculateRem(292px);
$sb-card-height: calculateRem(208px);
$sb-card-body-height: calculateRem(204px);
$sb-card-progressbar-height: calculateRem(4px);
$sb-card-hover-movement: calculateRem(3px);
$sb-card-padding: calculateRem(16px) calculateRem(16px) calculateRem(8px)
  calculateRem(16px);
$sb-card-border-radius: calculateRem(4px);
$sb-card-border: calculateRem(1px) solid #dedede;
$sb-card-box-shadow: 0 calculateRem(2px) calculateRem(7px) 0 rgba(0, 0, 0, 0.16);
$sb-card-bg-color: $white-color;
$sb-card-image-height: calculateRem(92px);
$sb-card-image-width: calculateRem(70px);
$sb-card-image-border-radius: calculateRem(2px);
$sb-card-image-border: calculateRem(1px) solid $gray-100;
$sb-card-image-bg-color: $gray-0;
$sb-card-label-font-size: calculateRem(11px);
$sb-card-label-color: $primary-color;
$sb-card-label-border: calculateRem(1px) solid $primary-color;
$sb-card-label-border-radius: calculateRem(2px);
$sb-card-label-padding: calculateRem(4px) $base-block-space;
$sb-card-label-height: calculateRem(24px);
$sb-card-badge-height: calculateRem(30px);
$sb-card-badge-width: calculateRem(30px);
$sb-card-meta-width: calculateRem(172px);
$sb-card-meta-color: $gray-400;
$sb-card-meta-font-size: $font-size-sm;
$sb-card-meta-line-height: calculateRem(17px);
$sb-card-title-color: $primary-color;
$sb-card-title-font-size: $h6-font-size;
$sb-card-title-line-height: ($sb-card-title-font-size * 1.25);
$sb-card-title-height: ($sb-card-title-line-height * 2);
$sb-card-title-font-weight: $font-weight-bold;
$sb-card-title-spacing: calculateRem(16px) 0 calculateRem(8px) 0;
$sb-card-meta-org-font-size: $h6-font-size;
$sb-card-progressbar-border-radius: 0 calculateRem(4px) calculateRem(4px)
  calculateRem(4px);
// Tamil
$sb-card-label-font-size-ta: calculateRem(9px);
$sb-card-meta-font-size-ta: calculateRem(10px);
$sb-card-title-font-size-ta: $font-size-sm;
$sb-card-meta-org-font-size-ta: $font-size-sm;
// Urdu
$sb-card-label-font-size-ur: calculateRem(9px);
$sb-card-meta-font-size-ur: calculateRem(10px);
$sb-card-title-font-size-ur: $font-size-sm;
$sb-card-meta-org-font-size-ur: $font-size-sm;

/* sb card styles */
.sb-card {
  width: $sb-card-width;
  // max-width: $sb-card-width;
  background-color: $sb-card-bg-color;
  border: $sb-card-border;
  border-radius: $sb-card-border-radius;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-top: $sb-card-hover-movement;
  transition: box-shadow 0.3s ease-out, transform 0.3s ease-out,
    opacity 0.2s ease-out;
  transition-delay: 0.1s;
  &:hover {
    transform: translate(0, -$sb-card-hover-movement);
    box-shadow: $sb-card-box-shadow;
  }
  .sb-card-body {
    height: $sb-card-body-height;
    padding: $sb-card-padding;
    overflow: hidden;
  }

  .sb-card-metas {
    display: flex;
    align-items: flex-end;
  }

  .sb-card-image {
    width: $sb-card-image-width;
    height: $sb-card-image-height;
    border: $sb-card-image-border;
    background-color: $sb-card-image-bg-color;
    border-radius: $sb-card-image-border-radius;
    box-sizing: border-box;
    overflow: hidden;
    margin: 0 ($base-block-space * 2) 0 0;

    img {
      width: $sb-card-image-width;
      height: $sb-card-image-height;
      object-fit: cover;
    }
  }

  .sb-card-meta {
    height: $sb-card-image-height;
    width: $sb-card-meta-width;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    overflow: hidden;
  }

  .sb-card-label {
    color: $sb-card-label-color;
    font-size: $sb-card-label-font-size;
    border: $sb-card-label-border;
    border-radius: $sb-card-label-border-radius;
    padding: $sb-card-label-padding;
    height: $sb-card-label-height;
  }

  .sb-card-badge {
    height: $sb-card-badge-height;
    width: $sb-card-badge-width;
    object-fit: contain;
    margin: 0 0 0 auto;
  }

  .sb-card-meta-item {
    font-size: $sb-card-meta-font-size;
    color: $sb-card-meta-color;
    width: $sb-card-meta-width;
    line-height: $sb-card-meta-line-height;
  }

  .sb-card-title {
    color: $sb-card-title-color;
    font-size: $sb-card-title-font-size;
    line-height: $sb-card-title-line-height;
    font-weight: $sb-card-title-font-weight;
    height: $sb-card-title-height;
    margin: $sb-card-title-spacing;
    overflow: hidden;
  }

  .sb-card-org {
    font-size: $sb-card-meta-org-font-size;
    color: $sb-card-meta-color;
  }

  .sb-card-progressbar {
    height: $sb-card-progressbar-height;

    .ui.progress .bar {
      border-radius: $sb-card-progressbar-border-radius;
    }
  }

  .sb-card-hover {
    position: absolute;
    top: 0;
    max-width: calculateRem(292px);
    width: 100%;
    height: 100%;
    background-color: rgba(2, 79, 157, 0.85);
    display: none;

    .sb-card-hover-content {
      display: flex;
      align-items: center;
      height: 100%;
      justify-content: center;
    }

    &.sb-card-hover-grey {
      background: rgba(153, 153, 153, .95);
      
      .sb-exclamation-icon, p {
        color: white;
      }

    }
  }

  &:hover {
    .sb-card-hover {
      display: block;
    }
    box-shadow: $sb-card-box-shadow;
  }
}

app-card[lang="ta"] {
  .sb-card {
    .sb-card-label {
      font-size: $sb-card-label-font-size-ta;
    }

    .sb-card-meta-item {
      font-size: $sb-card-meta-font-size-ta;
    }

    .sb-card-title {
      font-size: $sb-card-title-font-size-ta;
    }

    .sb-card-org {
      font-size: $sb-card-meta-org-font-size-ta;
    }
  }
}

app-card[lang="ur"] {
  .sb-card {
    .sb-card-label {
      font-size: $sb-card-label-font-size-ur;
    }
    .sb-card-meta-item {
      font-size: $sb-card-meta-font-size-ur;
    }
    .sb-card-title {
      font-size: $sb-card-title-font-size-ur;
    }
    .sb-card-org {
      font-size: $sb-card-meta-org-font-size-ur;
    }
    .sb-card-badge {
      margin: 0 auto 0 0;
    }
    .sb-card-image {
      margin: 0 0 0 ($base-block-space * 2);
    }
  }
}

// workspace cards

.sb-wspace-card {
  height: $base-block-space*16;
  max-width: $sb-card-width;
  @include border(border, 0.5px, $gray-0);
  @include border(border-left, 4px, $white);
  border-radius: $base-block-space/2;
  background: $white;
  padding: $base-block-space*2 $base-block-space*3;
  margin: 0px calculateRem(24px) calculateRem(24px) 0;

  .sb-wspace-title {
    margin-bottom: $base-block-space;
    font-size: $h5-font-size;
    font-weight: $font-weight-bold;
  }

  .sb-wspace-description {
    font-size: $font-size-sm;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }

  &:hover,
  &.active {
    .sb-wspace-title {
      color: $blue;
    }
    border-left: calculateRem(4px) solid $secondary-200;
    cursor: pointer;
    box-shadow: calculateRem(2px) calculateRem(5px) calculateRem(7px) 0 rgba(0, 0, 0, 0.2);
  }
}

// QR Card

.sb-card-qr {
  .sb-btn {
    border-radius: 0;
    width: 100%;
  }

  &:hover {
    .sb-btn {
      background: $secondary-400;
    }
  }
}

// Batch Card

.ui.card.sb-batch-card {
  border: 1px solid $primary-200;
  box-shadow: none;
  .item {
    padding: 10px 0;
    .content > .header {
      padding-bottom: calculateRem(5px);
    }
  }
  & > .sb-batch-card-content {
    padding: 0 1rem;
    border-top: calculateRem(1px) solid rgba(34, 36, 38, 0.1);
  }
}
.sb-batch-card {
  .sb-batch-card-title {
    font-weight: 600;
    font-size: 1.18em;
  }
  .item i.icon {
    font-size: calculateRem(12px);
  }
}
.sb-no-batch-found {
  background-color: $tertiary-0;
  border: 1px solid $tertiary-100;
  padding: ($base-block-space $base-block-space * 2);
  border-radius: calculateRem(4px);
  font-size: calculateRem(12px);
}