Ontica/Empiria.Land.Intranet

/**
 * @license
 * Copyright (c) La Vía Óntica SC, Ontica LLC and contributors. All rights reserved.
 *
 * See LICENSE.txt in the project root for complete license information.
 */

@import 'mixins', 'variables';

.tile {
  @include column;

  height: 100%;
  width: 100%;
  max-height: 300px;
  max-width: 280px;
  padding: 16px;
  background-color: $white;
  border: 1px solid $border-color;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

  &:hover {
    box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.14), 0 4px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  }
}

.selected-tile {
  box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.14), 0 4px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  background-color: $secondary-color-light;
}

.tile-header {
  @include column;

  font-size: 10.5pt;
  border-bottom: 1pt solid $primary-color-light;
  min-height: 48px;
  overflow: hidden;

  a {
    color: $secondary-color;
    font-weight: 600;
  }
}

.tile-content {
  @include column;
  @include expand;

  padding-top: 8px;
  font-size: 8.5pt;
  overflow-x: hidden;
  overflow-y: auto;

  label {
    padding-top: 6pt;
    color: $primary-color;
  }
}

.tile-footer {
  @include row;

  font-size: 8pt;
  overflow: hidden;
  align-content: flex-end;
}

.tile-icon {
  color: #b0b0b0;
  font-size: 16pt;
}