@import '../../assets/styles/colors';

.storybook-label-card-container {
  border: 1px dashed $primary;
  background-color: $white;
  box-shadow: none;
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  &--default {
    border: 1px dashed $primary;
  }
  &--primary {
    border: 1px dashed $primary;
  }
  &--success {
    border: 1px dashed $success;
  }
  &--warning {
    border: 1px dashed $warning;
  }
  &--error {
    border: 1px dashed $error;
  }
  &.x-small {
    width: 176px;
    height: 132px;
    font-size: 10px;
  }
  &.small {
    width: 208px;
    height: 156px;
    font-size: 11px;
  }
  &.medium {
    width: 235px;
    height: 176px;
  }
  &.large {
    width: 275px;
    height: 206px;
    font-size: 12px;
  }
  &.x-large {
    width: 320px;
    height: 240px;
    font-size: 14px;
  }
  .label-wrapper {
    background: $white;
    padding: 0px 10px;
    width: fit-content;
    max-width: 70px;
    height: 30px;
    display: flex;
    position: relative;
    bottom: 16px;
    box-shadow: 0px 0px 12px $shadow;
    font-weight: 600;
    .card-label {
      align-self: center;
      color: $primary;
      &--default {
        color: $primary;
      }
      &--primary {
        color: $primary;
      }
      &--success {
        color: $success;
      }
      &--error {
        color: $error;
      }
      &--warning {
        color: $warning;
      }
    }
  }
  .card-title {
    font-weight: 600;
    color: $primary;
    height: 33px;
    width: -webkit-fill-available;
    display: flex;
    align-items: center;
    padding: 0px 10px;
    &--default {
      background-color: $primary-light;
      color: $primary;
    }
    &--primary {
      background-color: $primary-light;
      color: $primary;
    }
    &--success {
      background-color: $success_light;
      color: $success;
    }
    &--error {
      background-color: $error_light;
      color: $error;
    }
    &--warning {
      background-color: $warning_light;
      color: $warning;
    }
  }
  .card-content {
    padding: 10px 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 94px;
  }
}