@import '../../../styles/common.scss';

.tile {
  height: 100%;
  display: grid;
  place-items: center;

  color: var(--hub-tile-color, $hub-tile-color);
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.9);

  border: 1px solid;
  border-color: var(--hub-tile-border-color, $hub-tile-border-color);

  &:hover {
    border: 1px solid var(--hub-tile-border-hover, $hub-tile-border-hover);

    box-shadow: 0 0 0 2px var(--hub-tile-border-hover, $hub-tile-border-hover);
  }

  &.disabled {
    background-color: var(
      --landingpage-smalltile-disabled-background-color,
      $landingpage-smalltile-disabled-background-color
    );
  }

  .icon {
    width: 60px;
    height: 60px;
    align-self: center;
    svg * {
      stroke: var(--hub-tile-stroke-color, $hub-tile-stroke-color);
    }
  }

  .label {
    display: grid;
    text-align: center;
    align-self: start;
    font-size: 18px;
  }
}
