@import './core_config';

@mixin icon-on-image-left-bottom(
) {
  position: relative;
  display: inline-block;

  &::after,
  &::before {

    position: absolute;
    bottom: 0;

    box-sizing: border-box;
    height: $vertical-unit;

    background-color: $color-black;

    line-height: $vertical-unit;

    transition: all $transition-fast;

    content: '';
  }

  &::after {
    width: $vertical-unit;
    left: 0;

    background-repeat: no-repeat;
    background-position: 50% 50%;
    opacity: 0.8;
  }

  &::before {
    font-size: 12px;
    font-weight: bold;
    left: 0;
    padding: 0 15px 0 0;
    text-transform: uppercase;
    white-space: nowrap;
    color: $color-white;
    opacity: 0;
  }

  &:hover::after,
  &:active::after,
  &:focus::after {
    opacity: 1;
    transition: all $transition-fast;
  }

  &:hover::before,
  &:active::before,
  &:focus::before {
    opacity: 1;
    left: $vertical-unit;
    transition: all $transition-fast;
  }

  &._show-gif {
    &::after {
      background-image: url('../../../css/com/layout/images/play-white.svg');
    }

    &::before {
      content: 'watch gif'
    }
  }
}