/*!
  *  Copyright (C) 2018 Robert Bosch GmbH Copyright (C) 2018 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
 */

@import '@bci-web-core/common-styles/sass/bci/bci-variables';
@import '@bci-web-core/common-styles/sass/bci/mixins/vendor-prefixes';
@import '@bci-web-core/common-styles/sass/bci/mixins/borders';

:host:focus {
  outline: none;
}

@mixin make-tile-icon($icon-size: 72px) {
  align-self: center;
  width: $icon-size;
  height: $icon-size;
  color: $boschBlack;

  &:before {
    font-size: $icon-size;
  }
}

@mixin display-flex($direction, $justify, $align) {
  display: flex;
  flex-direction: $direction;
  align-items: $align;
  justify-content: $justify;
  text-align: justify;
}

.tile {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2 * $grid-size;
  margin-bottom: $grid-size * 2;
  background-color: $boschWhite;
  padding: $grid-size * 2;
  box-sizing: border-box;
  width: 400px;
  height: 150px;
  color: $boschBlack;
  &:hover,
  &:focus {
    background-color: $boschGray90;
    cursor: pointer;

    .tile-icon {
      color: $boschBlack;
    }
  }

  &:active {
    background-color: $boschGray80;
  }

  @include transition(all 0.25s ease);

  .tile-icon {
    @include make-tile-icon(72px);
    min-width: 72px;
  }

  .tile-details {
    @include display-flex(column, center, flex-start);
    width: 100%;

    .title-wrapper {
      @include display-flex(row, space-between, flex-end);
      width: 100%;

      .mat-mdc-icon-button {
        text-align: center;
        color: $boschBlack;

        .mat-icon {
          margin-right: 0px;
        }
      }
    }

    .title {
      font-size: $font-size-large;
      height: 30px;
      font-weight: bold;
      width: 260px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .description {
      font-size: $font-size-base;
      line-height: 24px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .actions {
      @include display-flex(row, space-between, flex-end);
      width: 100%;

      .button-link {
        position: relative;
        font-size: $font-size-base;
        padding: 0;
        transform-style: preserve-3d;
        text-decoration: none;

        &:after {
          font-size: $font-size-base;
          margin-left: 2px;
        }
      }
    }
  }

  &.add-tile {
    background-color: transparent;
    color: $boschBlack;
    font-size: $font-size-large;
    @include make-border(1px, $boschGray80);

    .tile-icon {
      @include make-tile-icon(48px);
    }

    .tile-details {
      width: auto;

      .title {
        width: auto;
      }
    }

    &:hover {
      color: $boschBlack;
      background-color: $boschGray90;
      opacity: 0.75;
      cursor: pointer;
      @include make-border(1px, $boschGray90);

      .tile-icon {
        color: $boschBlack;
      }
    }

    &:active {
      background-color: $boschGray80;
    }
  }
}
