@use "../globals/" as *;
@use "../util/" as *;

$box-padding: 0 0 0.25rem 0;

.card {
  background-color: var(--element-fg-core);

  border-radius: $border-radius-lg;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.card.elevation-1{
    box-shadow: $base-box-shadow;
  }

.card.border{
    border: 1px solid var(--border-core);
}

.card:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: $border-radius-lg;
    opacity: .2;
    pointer-events: none;
}

.card.danger:after,
.card.danger button:not(.btn-secondary, .card-header-cta button) {
    background-color: $danger!important;
}

.card.danger.border,
.card.danger .card-divider {
    border-color: lighten($danger, 15)!important;
}

.card.warning:after,
.card.warning button:not(.btn-secondary, .card-header-cta button) {
    background-color: $warning!important;
}

.card.warning.border,
.card.warning .card-divider {
    border-color: lighten($warning, 15)!important;
}

.card.success:after,
.card.success button:not(.btn-secondary, .card-header-cta button) {
    background-color: $success!important;
}

.card.success.border,
.card.success .card-divider {
    border-color: lighten($success, 15)!important;
}

.card.info:after,
.card.info button:not(.btn-secondary, .card-header-cta button) {
    background-color: $info!important;
}

.card.info.border,
.card.info .card-divider {
    border-color: lighten($info, 15)!important;
}

.card-header-cta {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: flex;
  gap: .5rem;
}

.card .card-header-cta i,
.card .card-header-cta svg  {
  transform: rotate(0);
  transition: all 0.5s ease-in;
}

.card.show .card-header-cta .collapse i,
.card.show .card-header-cta .collapse svg  {
  transform: rotate(180deg);
}


.card-media {
  width: 100%;
  max-height: 250px;
  z-index: 1;
  & img {
    object-fit: cover;
    width: inherit;
  }
}

.card-content-container {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

// .card-container > * {
//   //flex: 1;
// }

.card-avatar {
  display: flex;
  align-items: center;
  margin: 0.75rem 1rem 0;
  padding: $box-padding;

  & img {
    height: 40px;
    width: 40px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 0.5rem;
    z-index: 1;
  }
  & .avatar-title {
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-core-hc);
  }
  & .avatar-subhead {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-core-lc);
  }
}

.card-header {
  padding: $box-padding;

  & .card-header-title {
    font-size: $font-size-md;
    color: var(--text-core-hc);
  }

  & .card-header-subhead {
    font-size: $base-font-size;
    line-height: 0.5;
    font-weight: 500;
    color: var(--text-core-lc);
  }
}

.card-content {
  padding: $box-padding;
}

.card-actions {
  padding: $box-padding;
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: end;
  z-index: 1;
    & .btn-content {
        margin: 0.5rem 0 .25rem;
    }
}

.card-divider {
    width: 100%;
    height: 0;
    margin: 0 0 .5rem 0;
    overflow: hidden;
    border-top: 1px solid var(--border-core);
}