@use '../../sass/abstracts/variables' as *;
@use '../../sass/abstracts/typography';
@use '../../sass/abstracts/mixins';

#{$object-prefix}pictogram {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;

  &__image {
    margin: auto;
  }

  &__text {
    @include typography.headline-small;
    color: $sodra-black !important;
    margin-top: 1rem;
    text-decoration: none;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;

    &:hover,
    &:focus {
      text-decoration: underline;
    }

    &--is-link::after {
      @include mixins.unity-symbols('arrow_forward');
      font-size: 28px;
      position: relative;
      top: -1px;
      margin-left: 0.5rem;
      transition: transform 0.3s ease-out;
    }

    &:hover {
      &::after {
        transform: translateX(4px);
      }
    }
  }
}