@use '@angular/material' as mat;
@import '../../../styles/themes/bag-theme';

.keyresult-slider {
  flex: 1.0 0.3 100px;
  padding: 4px;
  flex-direction: column;
  align-items: stretch;
  height: 56px;
  position: relative;
  top: -8px;
}

mat-slider {
  min-width: 100px;
}

.keyresult-card {
  margin-top: 12px;
  padding: 12px;
  border: solid mat.get-color-from-palette($md-primary, 500) 4px;
  border-top: 0;
  border-bottom: 0;
}

.keyresult-title {
  font-size: medium;
}

.keyresult-description {
  font-weight: 200;
  -webkit-line-clamp: 3;
  word-break: break-word;
}

.keyresult-progress-text {
  text-align: center;
  white-space: nowrap;
  position: relative;
  bottom: 10px;
}

.customFlex-1 {
  flex: 1.0 0.0;
}

.customFlex-2 {
  flex: 3.0 0.3;
  max-width: 100%;
}

@media only screen and (max-width: 480px) {
  .keyresult-slider {
    flex: 1.0 0.3 100%;
  }

  .keyresult-title {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
}

@media only screen and (max-width: 400px) {
  .keyresult-slider {
    display: none;
  }
  .keyresult-description {
    display: none;
  }
}
