/*
 * Copyright (c) 2021 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
 */

@import '@bci-web-core/common-styles/sass/bci/_bci-variables';

:host {
  display: flex;
  flex-direction: column;
}

.file-heading {
  font-size: $font-size-large;
  font-weight: $font-weight-strong;
}

.flex-style-no-stretch {
  flex: 0 1 auto;
  margin-top: 16px;
}

.flex-style-stretch {
  flex: 1 1 auto;
}

.flex-container {
  display: flex;

  .filecounter {
    margin-right: auto;
  }

  .disabled {
    color: $boschGray80;
  }

  mat-mdc-card + mat-mdc-card {
    margin-top: $padding-small-horizontal;
  }
}
.horizontal-card {
  .mat-mdc-card-content {
    display: grid;
    grid-template-columns: auto 96px 96px 48px;
    .card-column {
      display: inline-block;

      &.actions {
        margin-right: -12px;
      }
    }

    mat-label {
      white-space: nowrap;
      font-size: $font-size-small;
    }

    span {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.small-card-view {
  display: grid !important;
  grid-template-columns: auto auto !important;

  .action {
    justify-self: end;
    margin-right: -12px;
  }

  span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.align-style {
  align-items: center;
}

.no-padding {
  padding: 0 !important;
}

.column-gap {
  column-gap: 16px;
}

.no-files-added {
  height: 120px;
  border: 1px dashed;
  text-align: center;
  white-space: pre-line;
  color: $boschGray40;
  cursor: pointer;
  margin-top: 15px;

  &:hover,
  &:focus {
    border-color: $boschBlue50 !important;
  }

  &:active {
    border-color: $boschBlue40 !important;
  }
}

.flex-direction-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.description {
  white-space: pre-line;
}

.mat-button.command {
  &:after {
    display: none;
  }
}

bci-empty-state {
  color: $boschBlack;

  p {
    margin: 0px;
  }

  &:hover,
  &:focus {
    color: $boschBlue50 !important;
  }

  &:active {
    color: $boschBlue40 !important;
  }
}
