//@use '~@angular/material' as mat;
//@import "../../../../../styles.scss";

:host ::ng-deep .mat-grid-tile {
  $border-width: 4px;

  cursor: pointer;

  &:after {
    content: ' ';
    border: $border-width solid transparent;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    pointer-events: none;
    transition: all 200ms ease-in;
  }

  &.is-selected {
    &:after {
      border: 4px solid #da9803;
    }
    .mat-grid-tile-footer {
      background-color: rgba(218, 152, 3, 0.37);
    }
  }
  &:hover:after {
    border: 4px solid #da980387;
  }
  .mat-grid-tile-footer {
    background-color: rgba(120, 128, 136, 0.49) ;
    padding: 0 8px;

    span {
      overflow: hidden;
      padding-right: 4px;
      text-overflow: ellipsis;
    }

    co-icon ::ng-deep {
      height: 20px;
      width: 20px;
      svg {
        fill: #FFF;
      }
    }
  }
}

