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

.container {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-column: span 3;
  grid-row: span 1;
  place-items: center;

  color: #444;
  text-decoration: none;
  background-color: var(
    --landingpage-smalltile-background-color,
    $landingpage-smalltile-background-color
  );

  border: 1px solid;
  border-color: var(
    --landingpage-smalltile-border-color,
    $landingpage-smalltile-border-color
  );

  transition: box-shadow 0.15s ease-in-out 0s;

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

  &:hover {
    border: 1px solid
      var(
        --landingpage-smalltile-border-color,
        $landingpage-smalltile-border-color
      );

    box-shadow: 0 0 0 2px
      var(
        --landingpage-smalltile-border-color,
        $landingpage-smalltile-border-color
      );
  }

  .icon {
    align-self: center;
    width: 40px;
    height: 40px;
    svg * {
      stroke: var(
        --landingpage-smalltile-stroke-color,
        $landingpage-smalltile-stroke-color
      );
    }
  }

  .label {
    text-align: center;
    align-self: center;
    font-size: 15px;
    color: var(--landingpage-smalltile-color, $landingpage-smalltile-color);
  }
}
