@mixin kto-link {
  position: relative;

  &, &:hover {
    text-decoration: none;
  }
}

.kto-link {
  @include kto-link;
}

@mixin kto-link_theme_dark {
  color: #fff;
  z-index: 1;
  &::after {
    content: '';
    width: 100%;
    height: 1px;
    background: #ffffff;
    position: absolute;
    bottom: -1px;
    left: 0;
  }
  &::before {
    content: '';
    width: 100%;
    height: 1px;
    background: #ffffff;
    position: absolute;
    bottom: -1px;
    left: 0;
    transition: height .3s;
    z-index: -1;
  }


  &:hover {
    color: #27282C;
    &::before {
      height: 100%;
    }
  }
}

@mixin kto-link-standalone {
  border-bottom: 1px solid transparent;
  &:hover {
    color: #ffffff;
    border-bottom: 1px solid #fff;
  }
}

.kto-link-standalone {
  color: #ffffff;
  @include kto-link-standalone;
}

.kto-link_theme_dark {
  @include kto-link_theme_dark;
}

.kto-anchor-link {
  color: inherit;
  text-decoration: none;
  &:any-link {
    color: inherit;
    text-decoration: none;
  }
  &::after {
    display: inline-block;
    content: '';
    background: center;
    background-size: 40px;
    margin-left: 10px;
    height: 40px;
    width: 40px;
  }
  &:hover {
    text-decoration: none;
    color: inherit;
    &::after {
      background-image: url('./anchor.svg')
    }
  }
  &--small {
    &::after {
      background-size: 32px;
      margin-left: 20px;
      height: 32px;
      width: 32px;
    }
  }
  &--hover-white {
    &:hover {
      &:after {
        background-image: url("./anchor_fff.svg");
      }
    }
  }
}