@import '../colors.css';
@import '../variables.css';

.icon {
  font-size: calc(1.8 * var(--unit));
  margin-right: var(--unit);
}

.link {
  align-content: center;
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  line-height: 1.5;
  position: relative;
  transition: opacity var(--animation-duration) var(--animation-curve-default);

  @apply --reset;

  &:not(.active) {
    opacity: 0.5;
  }

  &:hover,
  &:active {
    opacity: 1;
  }

  & > * {
    vertical-align: middle;
  }

  & > small {
    font-size: var(--font-size-tiny);
    margin-left: calc(0.8 * var(--unit));
    text-align: center;
  }
}